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();

}