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)