Motion Framework in Infragistics

Infragistics come up with the new technology called "motion frame work". which will give the full feature of visualization of the data in the impresive manner and animated experience.

It will be mainly used across the Silver light and wpf data visualization applications.

Showing context menu in the ultrawebgrid using javacript.

Showing context menu in the ultrawebgrid using javacript.

step1:

Create ultrawebgrid with Rowselection.(if not choose selected row property getActiveRow method will not work)

step2:

create web menu with property setting of Popupmenu.

step3:

Calling showmenu function from gridcell click of ultrawebgrid.

step4:

function showmenu(objGrid,objGridid,button)
{

var grid = igtbl_getGridById(objGrid);
if(grid.getActiveRow()!=null)
{
if(button==2)
{
igmenu_showMenu('uwmContextmenu',event);
return true;
}
}
else
{
alert("Please select atleast one row");
return false;
}
}

opening Infragistics webdialogwindow using javascript.

opening Infragistics webdialogwindow using javascript.

var dialogObject = $find("WebDialogWindowSchedule");

dialogObject.get_contentPane().set_contentUrl(TargetURL);

dialogObject._header.setCaptionText("Welcome");

dialogObject.show();


In our project we have to give option like. when ever click on the context menu.

have to show the webdialog window.

While loading have to hide the webdialogwindow. only when we click on the context menu

have to show the dialog. for that have to make width and height 0. when we click on the

context menu have to assign the widht and height.

We have come across some performance issue in the ultrawebgrid.

Please follow the below rules while doing code with infragistics.


1). Don't add dynamic controls in the Initialize row of the ultrawebgrid.


2). Use PreRender event of ultrawebgrid adding dynamic controls.


3). declare all the styles and properties in the code behind.


Explain.

if you declare properties of ultrawebgrid in the aspx. it will take more time to render. so always try to put in the codebehind.

Reading and adding controls dynamically for templated Column in ultrawebgrid.

I have come across performance issue when we add the controls in the initialize row of ulrtrawebgrid. so i have decided to move in to prerender controls.

After moving the controls in to prerender performance got increased.

void uwgProduct_PreRender(object sender, EventArgs e)
{
TemplatedColumn col = (TemplatedColumn)uwgProduct.DisplayLayout.Grid.Bands[0].Columns.FromKey("HeaderCheck");
TemplatedColumn colChild = (TemplatedColumn)uwgProduct.DisplayLayout.Grid.Bands[1].Columns.FromKey("ChildCheck");
int rowTotalCount = uwgProduct.Rows.Count;
///Header////
for (int rowcount = 0; rowcount <>
{

CellItem objcellITem = (CellItem)col.CellItems[rowcount];
HtmlInputCheckBox htmlCheck = new HtmlInputCheckBox();
htmlCheck.Attributes.Add("onclick", "selectEachParent(event,this.value)");
htmlCheck.Attributes.Add("id", Convert.ToString(objcellITem.Value));
htmlCheck.Value = Convert.ToString(objcellITem.Value);
objcellITem.Controls.Add(htmlCheck);
}
////Header/////

////Child Display////////
int childTotalCount = colChild.CellItems.Count;
for (int childCount = 0; childCount <>
{
CellItem objcellITem = (CellItem)col.CellItems[rowIndex];
CellItem objcellITemChild = (CellItem)colChild.CellItems[childCount];
HtmlInputCheckBox htmlCheckChild = new HtmlInputCheckBox();
htmlCheckChild.Attributes.Add("onclick", "UnselectParent(event,this.value)");
htmlCheckChild.ID = Convert.ToString(objcellITem.Value) + "_" + Convert.ToString(objcellITemChild.Value);
htmlCheckChild.Value = Convert.ToString(objcellITem.Value) + "_" + Convert.ToString(objcellITemChild.Value);
objcellITemChild.Controls.Add(htmlCheckChild);
}
////End Child Display////////
}

Infragistics WebDataGrid validation.

In our project we need to do validation for webdatagrid using javascript.

var Gkey,GIndex;
function EnterEditModeValidate(objGrid,Obj1Edited)
{
Gkey = Obj1Edited._cell._column._key;
GIndex = Obj1Edited.getCell().get_row()._index;
}
function ExitingEditValidate(sender,evntArgs)
{
//var index=sender.get_columns().get_columnFromKey(Gkey).get_index();
//var value=sender.get_rows().get_row(GIndex).get_cell(index).get_value();
var innT = document.getElementById("wdgProductList_ed0");
var iChars = "!@#$%^&*()+=-[]\\\;,./{}|\":<>?~_";
if(innT!=null)
{
var sValue = innT.children[0].value;
if(Gkey=="ShipAddress")
{
if(sValue=="")
{
alert("Please enter the value");
evntArgs.set_cancel(true);
}
if(sValue.length > 40)
{
alert("Charecters should be below 40");
evntArgs.set_cancel(true);
}
for (var count = 0; count <>
{
if (iChars.indexOf(sValue.charAt(count)) != -1)
{
alert ("Your string has special characters. \nThese are not allowed.");
evntArgs.set_cancel(true);
}
}
}
}
}

Adding controls in to ultrawebgrid using PreRenderMethod.

TemplatedColumn col = (TemplatedColumn)uwgProduct.DisplayLayout.Grid.Bands[0].Columns.FromKey("HeaderCheck");
int rowTotalCount = uwgProduct.Rows.Count;
for (int rowcount = 0; rowcount < rowTotalCount; rowcount++)
{
CellItem objcellITem = (CellItem)col.CellItems[rowcount];
DropDownList drp = new DropDownList();
drp.Items.Add(new ListItem("test", "ss"));
drp.ID = "dd";
objcellITem.Controls.Add(drp);
}

Disabling the Drag for Source Object

Take this scenario, I have the table, in that having list of names, As per business logic some names should not allow the drag and drop functionality.

For that have to use set_cancel method. According to the condition it will not allow the drag and drop.

Example

ddb=new $Ig.DragDropBehaviour();

ddb.get_events().addDragStartHandler(DragStartHandler);

function DragStartHandler(sender, args)

{

args.set_cancel(true);

return;

}

Drag & Drop Events-Infragistics

1) addDragMoveHandler--- it will work, While moving the jobs from origin to destinaton origin.

2) addDragStartHandler-- When starting of drag will work., In this we can cancel the event using args.set_cancel(true);

3) addDragEndHandler--- it will work, After drop handler event fired,

4) addDragLeaveHandler--- it will work,after move out from the source block,

5) addDragCancelHandler--- it will work, After dragging not dropping to destination.

6) _removeHandler --It will remove only specified event handler.

7) clearHandler--It will clear all the event handler.

Validation Drag & Drop Infragisitics.

We are facing one problem in the Current project, The issue is dragging the jobs from source and droping to destination.

In the destination am doing validation, if the validation has fails. We should not drop the jobs and it should go back to the destination automatically. Still i didnt found the solution. Even had a discussion with the infragistics. hopefully will get the solution soon.

For the above i have found the alternate solution.

I am using the copy and paste method for dragging the jobs.

If the validation fails in the destionation. i will not drop the destionation. so no need to go back the source. Already will have to data in the source. Because we are using the copy and paste method.

Example

Sys.Application.add_load(appLoaded);

function appLoaded(){

var ddb = new $IG.DragDropBehavior();

var list = $get("imageList");

var count = list.childNodes.length;

var child;

for (var i = 0; i <>

child = list.childNodes[i];

if (child.getAttribute) {

ddb.addSourceElement(child);

}

}

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

ddb.get_events().addDropHandler(dropHandler);

}

function dropHandler(sender, args){

var srcItem = args.get_manager().get_source().element;

var target = $get("cartAreaDiv");

//debugger;

if (srcItem.id == "CD"){

alert("You can't add a CD!"); Validatiion got failed.

}

else{

target.appendChild(srcItem);

}

}

Drag & Drop Basics-Infragistics

Let me discuss some of the basic things about the Infragistics frame work. We have two type of drag and drop in the Infragistics.

1)Copy and paste. (Source will not delete, it will append to the destination)

2)Cut and paste. (Source will delete, it will not append to the destination)

If you want to enable the 1st one have to include the below code.

var ddb = new $IG.DragDropBehavior();

And include below code to enable the 2nd one.

var ddb = new $IG.DragDropBehavior();

var date = $get("ctl00_ContentPlaceHolder1_lblDate");

var wcgId = $get("ctl00_ContentPlaceHolder1_wcg_id");

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

}