Drag & Drop In Infragistics New Framework

Infragistics(2009.1), In the new version drag & drop features implemented. We can implement this feature in the html element.

Note:This is very good support for DIV element in the HTML. Dont use other thin div. when you add more functionality in the page, it may give problem when you use other than DIV.

Make sure Div elment in the outermost..

Example:

<div id="tech1"><table><tbody><tr><td></td></tr></tbody></table>
</div>

Step 1:

Download original version from Infragistics 2008 or 2009

Step 2:

Download below three files from Infragistics installed folder.

1)igDragDrop.js

2)5_igObjects.js

3)igAnimation.js

Maintain same order, when you add the Above javascript in the page.

Step 3:

Add the below script in the page, which you are going to implement the drag & drop feature.This is the script will allow the drag and drop feature.

<script type="text/javascript">

if (typeof (Sys) !== 'undefined')

{

Sys.Application.notifyScriptLoaded();

Sys.Application.add_load(appLoaded);

}

</script>

Step 4:

In the below script have two method which will enable the drag & drop for html elements.Also am adding the script in the addsource element and adddrag element.

1)addSourceElement

2)addTargetElement

It will deside the from and destination of the elements.

function appLoaded() {

ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var list = $get("DragUnassign");

var count = list.childNodes.length;

for (var i = 0; i <>

var child = list.childNodes[i];

if (child.getAttribute)

ddb.addSourceElement(child);

}

for (var k in techIds) {

ddb.addTargetElement($get(techIds[k]), true); //Techids nothing but a div //element of the id

var jobs = $get(techIds[k]);

if (jobs != null) {

if (jobs.childNodes != null) {

var jobCount = jobs.childNodes.length;

for (var x = 0; x <>

var job = jobs.childNodes[x];

if (job.getAttribute)

ddb.addSourceElement(job);

}

}

}

}

ddb.addTargetElement($get("DragUnassign"), true);

ddb.get_events().addDropHandler(dropHandler);

var autoComplete = $find('Auto');

}

Step 5:

In this method "$IG.DragDropBehavior()" we have method called drop Handler.

This is method it will enable the events.

Note:In the present version, It cannot write a server side method for the drag & drop feature.

Step 6:

This is the method will call the webservice.

function dropHandler(sender, args)

{

var manager = args.get_manager();

if (args.get_manager()._dragging == true) {

var progressEnable = false;

var target = manager.get_targetElement().id.replace("tech", "");

techId = target;

var obtblid = techId.replace("tech", "parent");

var sourceElement = manager.get_source().element.id;

var sourceObject = manager.get_source().element.offsetParent.id;

////////////////////This is for Dragging & droping Jobs from Unassigned to Technician////////////

if ((sourceObject == "DragUnassign") && (manager.get_targetElement().id.indexOf("tech") != -1)) {

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.AssignJob(target, sourceElement,drcCommitdate, "ADD", onSuccessDrag, onFailureDrag);

}

//////////////////// End for Dragging Jobs from Unassigned to Technician////////////////////////

////////////////////This is for Dragging & droping Jobs from Technician to Technician////////////

else if ((sourceObject.indexOf("tech") != -1) && (manager.get_targetElement().id.indexOf("tech") != -1)) {

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.AssignJob(target, sourceElement,drcCommitdate, "UPDATE", onSuccessDrag, onFailureDrag);

}

////////////////////End for Dragging & droping Jobs from Technician to Technician////////////

else

{

////////////////////This is for Dragging & droping Jobs from Technician to Unassigned ////////////

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.UnassignJob(sourceElement);

//LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.GetUnassignedJobs(wcgId, drcCommitdate, onSuccessDragUnassign, onFailureDrag);

////////////////////End for Dragging & droping Jobs from Technician to Unassigned////////////

}

if (progressEnable == true)

{

showProgress(techId.replace("tech", "")); ////////Showing the Progress Bar

}

}

}

Step 7:

function onSuccessDrag(Result)

{

var ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var obtblid = "parent"+techId;

var objTbl = document.getElementById(obtblid);

var objTbody = objTbl.getElementsByTagName("tbody")[0];

objTbl.setAttribute("cellpadding", "0");

objTbl.setAttribute("cellspacing", "0");

objTbl.setAttribute("frame", "box");

objTbl.setAttribute("className", "tblAssignParenttech");

var preRows = objTbody.rows.length;

for (j = 0; j <>

{

if (j != 0)

{

objTbody.removeChild(objTbody.rows[j]);

}

}

var objRow = document.createElement("tr");

var objTd = document.createElement("td");

var objDiv = document.createElement("div");

objRow.setAttribute("className", "tblAssignParenttechRow");

objDiv.setAttribute("className", "tblscrollAssign");

objDiv.setAttribute("id", "tech"+techId);

var len = Result.length;

for (i = 0; i <>

objSplit = Result[i].split("||");

jobId = objSplit[0];

JobInterval = objSplit[1];

JobMON = objSplit[2];

var objchildjobDiv = document.createElement("div");

objchildjobDiv.setAttribute("id", jobId);

var objchildTbl = document.createElement("table");

var objchildTblBody = document.createElement("tbody");

objchildTbl.setAttribute("border", "0");

objchildTbl.setAttribute("width", "100%");

objchildTbl.setAttribute("cellpadding", "3");

objchildTbl.setAttribute("cellspacing", "1");

objchildTbl.setAttribute("className", "liBorder");

var objchildRow = document.createElement("tr");

var objchildTd = document.createElement("td");

objchildTd.setAttribute("className", "borderstyle");

var objchildTd1 = document.createElement("td");

objchildTd.innerText = JobInterval;

objchildTd1.innerText = JobMON;

objchildRow.appendChild(objchildTd);

objchildRow.setAttribute("ondblclick", "javscript:showJob(this);");

objchildRow.appendChild(objchildTd1);

objchildTblBody.appendChild(objchildRow);

objchildTbl.appendChild(objchildTblBody);

objchildjobDiv.appendChild(objchildTbl);

objDiv.appendChild(objchildjobDiv);

ddb.addSourceElement(objchildjobDiv);

}

objTd.appendChild(objDiv);

objRow.appendChild(objTd);

objTbody.appendChild(objRow);

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.addTargetElement($get("DragUnassign"), true);

ddb.addTargetElement($get("tech" + techId), true);

ddb.get_events().addDropHandler(dropHandler);

hidemodalProgress();

}

Step 8:

Once the request is succeed with above method. I am generating the client side table with array data using javascript.

function onSuccessDrag(Result)

{

var ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var obtblid = "parent"+techId;

var objTbl = document.getElementById(obtblid);

var objTbody = objTbl.getElementsByTagName("tbody")[0];

objTbl.setAttribute("cellpadding", "0");

objTbl.setAttribute("cellspacing", "0");

objTbl.setAttribute("frame", "box");

objTbl.setAttribute("className", "tblAssignParenttech");

var preRows = objTbody.rows.length;

for (j = 0; j <>

{

if (j != 0)

{

objTbody.removeChild(objTbody.rows[j]);

}

}

var objRow = document.createElement("tr");

var objTd = document.createElement("td");

var objDiv = document.createElement("div");

objRow.setAttribute("className", "tblAssignParenttechRow");

objDiv.setAttribute("className", "tblscrollAssign");

objDiv.setAttribute("id", "tech"+techId);

var len = Result.length;

for (i = 0; i <>

objSplit = Result[i].split("||");

jobId = objSplit[0];

JobInterval = objSplit[1];

JobMON = objSplit[2];

var objchildjobDiv = document.createElement("div");

objchildjobDiv.setAttribute("id", jobId);

var objchildTbl = document.createElement("table");

var objchildTblBody = document.createElement("tbody");

objchildTbl.setAttribute("border", "0");

objchildTbl.setAttribute("width", "100%");

objchildTbl.setAttribute("cellpadding", "3");

objchildTbl.setAttribute("cellspacing", "1");

objchildTbl.setAttribute("className", "liBorder");

var objchildRow = document.createElement("tr");

var objchildTd = document.createElement("td");

objchildTd.setAttribute("className", "borderstyle");

var objchildTd1 = document.createElement("td");

objchildTd.innerText = JobInterval;

objchildTd1.innerText = JobMON;

objchildRow.appendChild(objchildTd);

objchildRow.setAttribute("ondblclick", "javscript:showJob(this);");

objchildRow.appendChild(objchildTd1);

objchildTblBody.appendChild(objchildRow);

objchildTbl.appendChild(objchildTblBody);

objchildjobDiv.appendChild(objchildTbl);

objDiv.appendChild(objchildjobDiv);

ddb.addSourceElement(objchildjobDiv);

}

objTd.appendChild(objDiv);

objRow.appendChild(objTd);

objTbody.appendChild(objRow);

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.addTargetElement($get("DragUnassign"), true);

ddb.addTargetElement($get("tech" + techId), true);

ddb.get_events().addDropHandler(dropHandler);

hidemodalProgress();

}

ResizableControlExtender in Ajax

Asp.Net Ajax offers a ResizableControlExtender to resize the any element in the webpages. Please follow the below steps to create the Resizablecontrolextender for the panel.

Step 1:
Create Ajax enabled website.

Step 2:

Now go to the solution explorer and add the Ajaxcontroltoolkit.dll in the root directory.

Step 3:

Also add the Ajaxcontroltoolkit.dll in the toolbox to get the control.

Step 4:

Create CSS for HandleCssClass and ResizableCssClass for the control attribute.

<style type="text/css">
.handle
{
width:10px;
height:10px;
background-color:#aaccee;
}
.resizing
{
padding:0px;
border-style:solid;
border-width:1px;
border-color:#aaccee;
cursor:se-resize;
}
</style>



Step 4:

Create one panel with the some paragraph document.

<asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;">
<asp:Label ID="image1" runat="server" Text="ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window.">
</asp:Label>
</asp:Panel>

Step 5:

Create the ResizableControlExtender and link the panel.

<cc1:resizablecontrolextender ID="ResizableControlExtender1"
runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizing" MaximumHeight="400" MaximumWidth="500"
MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" />

calling WCF Service method from javascript

here am speaking about the how wcf service method will call in the clientside using javascript. please find the below examples.

Before starting the code please select the template called Ajax enabled wcf service.

then call the method in the javascript.


ASPX with javascript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function getValue()
{
AjaxWCF.DoWork(onSucess,onFailure)
}
function onSucess(result)
{
alert(result);
}
function onFailure(result)
{
alert(result);
}
</script>
</head>
<body onload="getValue();">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWCF.svc" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

AjaxWCF.svc File


using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace Xmlhttp
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AjaxWCF
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "Hi bala";
}
// Add more operations here and mark them with [OperationContract]
}
}

Access a control on the Content Page from a MasterPage using JavaScript

If you have a control on the control page, which has to be accessed in the master page using JavaScript, then here how to do so.

on the content page. create a text box has given below.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="panelContent" GroupingText="ContentPage Controls" runat="server">
<asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
</asp:Panel>
</asp:Content>

Now access and control the page text box "txtContent" from the master pages.

<head runat="server">
<title></title>
<script type="text/javascript">
function accessControlContentPage() {
var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent").ClientID %>');
txtCont.value = "I got populated using Master Page";
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

Calling Webservice through Ajax with javascript

In modern way of calling the web service through the JavaScript.

Aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
function OnLookup()
{
var stb = document.getElementById("txt1");
Xmlhttp.call.HelloWorld1(stb.value, OnLookupComplete);
}
function OnLookupComplete(result)
{
var res = document.getElementById("txtHint");
res.innerHTML = "<b>" + result + "</b>";
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/call.asmx" />
</Services>
</asp:ScriptManager>
First Name:<input type="text" id="txt1" onkeyup="OnLookup();">
<span id="txtHint"></span>
</div>
</form>
</body>
</html>


webservice
namespace Xmlhttp
{
///

/// Summary description for call
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class call : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
string value = "1";// HttpContext.Current.Request.QueryString["value"];
Dictionary objDictionary = new Dictionary();
if (HttpRuntime.Cache["out"] != null)
{
objDictionary = (Dictionary)HttpRuntime.Cache["out"];
if (!objDictionary.ContainsKey(value))
{
objDictionary.Add(value, value + "out");
}
}
else
{
objDictionary.Add(value, value + "out");
}
HttpRuntime.Cache["out"] = objDictionary;
return objDictionary[value];
}
[WebMethod]
public string HelloWorld1(string value)
{
return value;
}
}
}

Accessing webservice from javascript using XML HTTp Activex

Define:

XML http is a active X object to enable the browser to sending the request and receiving the response asynchronously.

Example:

Aspx Section


<html>
<head>
<script type="text/javascript">
var xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
try
{// Firefox, Opera 8.0+, Safari, IE7
xmlHttp=new XMLHttpRequest();
}
catch(e)
{// Old IE
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
var url = "http://localhost:2735/call.asmx?op=HelloWorld";
//var getValue = document.getElementById("txt1");
//url = url + "&value='" + getValue.value + "'";

xmlHttp.onreadystatechange = output;
xmlHttp.open("GET",url,true);
xmlHttp.send();
function output() {
if (xmlHttp.readyState == 4)
{
xmlHttp.open("POST", "http://localhost:2735/call.asmx/HelloWorld", false);
xmlHttp.send();
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

Webservice Section


namespace Xmlhttp
{
///

/// Summary description for call
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class call : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
string value = "1";// HttpContext.Current.Request.QueryString["value"];
Dictionary objDictionary = new Dictionary();
if (HttpRuntime.Cache["out"] != null)
{
objDictionary = (Dictionary)HttpRuntime.Cache["out"];
if (!objDictionary.ContainsKey(value))
{
objDictionary.Add(value, value + "out");
}
}
else
{
objDictionary.Add(value, value + "out");
}
HttpRuntime.Cache["out"] = objDictionary;
return objDictionary[value];
}
[WebMethod]
public string HelloWorld1(string value)
{
return value;
}
}
}

Filtering using Linq

Filtering datarow using Linq.

object[] ArrDr = DR.ItemArray;

IList