Navigating Data Grid using Client Scripting

Introduction

Data Grids are gaining very popular in presenting data over the browser. If not properly coded using the datagrids can cause serious performance issue. This article is presented with some sample code for navigating through the ASP Data Grid and Infragistics Web Grid using the Java Script. By following this code sample it can be modified to accomplish lots of validation as well as setting some dynamic properties for the grid on the client side itself. And there by we can achieve lots of functionality achieved through client scripting and make improve the performance of the web page

Code Sample for Navigating ASP DataGrid

function NavigatingDataGrid(oDataGrid) 
{ 
for(j = 0; j < oDataGrid.childNodes.length; j++) 
{ 
var tBody = oDataGrid.childNodes(j); 
for(k=0;k < tBody.childNodes.length-1; k++) 
{ 
var tr = tBody.childNodes(k); 
for(l=0; l < tr.childNodes.length-1; l++) 
{ 
td = tr.childNodes(l); 
//loop through the column and do the validation as required 
//if there is any control inside the Column access the control 
//by gettting the childNodes of the column 
} 
} 
} 
}
 
The cells in the data grid is accessed by getting the childNodes of the Table object that is rendered on the browser. 
The first childNode gives the TBody object. The childNode of the TBody gives the Row of the table. The childNodes 
of the Row gives the column in that row.If there are any controls inside the Cell it can be accessed through it's 
childNodes. Once we are able to navigate the grid using the client script we can do lots of business validations like 
summing the value in some column or checking for value in relevant to value on other column or rows etc. This initial 
validation will help improve the performance of the Web page by minimizing the trip to the server as well as ensuring 
valid data.

Code Sample for Navigating Infragistics Web Grid

(Adding Rows in Infragistics Web Grid when the data is entered on the last row)

function AfterCellUpdate(gridName,cellId) 
{ 
var row = igtbl_getRowById(cellId); 
var grid = igtbl_getGridById(gridName); 
var band = row.Band 
var col = igtbl_getColumnById(cellId); 
if (band.Key == 'Parent') 
{ 
if (row.getIndex() == grid.Rows.length-1) 
{ 
igtbl_addNew(gridName,0); 
var lastrow = row.getNextRow; 
igtbl_addNew(gridName,1); 
} 
} 
if (band.Key == 'Child') 
{ 
if (row.getIndex() == row.ParentRow.Rows.length-1) 
{ 
igtbl_addNew(gridName,1); 
} 
} 
}

(Detecting the KeyStroke on the client Script)

function KeyDown(gn,cellId,KeyStroke) 
{ 
if (KeyStroke == 46) 
{ 
var row = igtbl_getRowById(cellId); 
var grid = igtbl_getGridById(gn); 
var band = row.Band; 
if (band.Key == 'Parent') 
{ 
return true; 
} 
} 
if (band.Key == 'Child') 
{ 
if (row.getIndex() == row.ParentRow.Rows.length-1) 
{ 
return true; 
} 
} 
}
 (Dynamically changing the dropdown value for a cell based on the value on selected on other rows)

function BeforeEnterEdit(tableName,cellName) 
{ 
var col = igtbl_getColumnById(cellName); 
var cell = igtbl_getCellById(cellName); 
var grid = igtbl_getGridById('WGA'); 
var row = igtbl_getRowById(cellName); 
var rowno = row.getIndex(); 
if ((col != null) && (col.Key == 'StateDefinitionID')) 
{ 
var blnAddKey; 
var cell1; 
var i; var j = 0; var row1; 
var index = col.Index; 
var vlist = new Array(); 
var vlistold = new Array(); 
var vkey = new Array(); 
for (var key in LookUp) 
{ 
vlistold[j] = new Array (key,LookUp[key]['Name']);
j++; 
} 
vlistold[j] = new Array ('0',' '); 
j = 0; 
col.ValueList = vlistold; 
for (i=0;i<grid.Rows.length;i++) 
{
row1 = grid.Rows.getRow(i);
cell1 = row1.getCell(index);
if ((cell1.getValue() != 0) && (rowno != row1.getIndex())) 
{
vkey[j] = cell1.getValue();
j++;
}
}
j = 0;
for (var key in LookUp) 
{
blnAddKey = true;
for (var l = 0;l < vkey.length;l++) 
{
if (key == vkey[l]) 
{
blnAddKey = false;
break;
}
}
if (blnAddKey == true) 
{
vlist[j] = new Array(key,LookUp[key]['Name']);
j++;
}
}
vlist[j] = new Array ('0',' ');
col.ValueList = vlist
}
} 
 Code Explanation

For the infragistics client events the events can be set at design time on client side script or can be defined dynamically too. Either way once the client side events for the above functions (the events name will be same as the function name) the client events will be associated with the grid.

The first example shows how to add additional rows on the grid, when the data is entered on the last row of the grid. The band will give the level of  hierarchy of the row in the grid.Depending on the level the row new row can be added. Once the row is added the value for (ex:ID can be set to -1) and on the server side processing consider that all the row with ID -1 are new rows). This way to add the row the server trip can be avoided and make the page to perform faster.

The second example shows how to trap the keydown event on the grid. In the example we are trapping the delete key down event and returning true. This will cancel the deletion of the row. The business logic can be added here to prevent the user from deleting the row without making the trip to the server.

The last example is the unique reruirement I had in my project where as the dropdown value in one of the column can't be selected twice. This code will remove the selected value(s) from the drop down and before the column enters into the edit mode set the drop down value accordingly. This code can be modified to make the drop down dynamic as per the business requirement.The Array LookUp used in the function should have been defined in the page.

Conclusion

Hope this sample code would be useful for developers who are want to navigate the datagrids using client scripting.