Navigating through DataGrid / Infragistics WebGrid using JavaScript

Introduction

DataGrids are gaining popularity in presenting data on the browser. If not properly coded, using the DataGrids can cause serious performance issues. This article is presented with some sample code for navigating through the ASP DataGrid and Infragistics WebGrid using JavaScript. The code sample can be modified to accomplish a number of validations as well as for setting some dynamic properties for the grid on the client side. This way, we can achieve lots of functionalities through client scripting which in turn improves the performance of the web page.

Code sample for navigating through 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 
         } 
      } 
   } 
}

Code explanation

The cells in the DataGrid are 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 TBody gives the row of the table. The childNodes of the row give the columns in that row. If there is any control inside the cell it can be accessed through its childNode. Once we are able to navigate through the grid using the client script we can do lots of business validations like summing up the values in some columns or checking for relevant values in a given column or row etc. This initial validation helps in improving the overall performance of the web page by minimizing the number of trips made to the server as well as ensuring valid data.

Code sample for navigating through Infragistics WebGrid

Adding rows in Infragistics WebGrid when data is entered in 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 of a cell based on the value 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 Infragistics client events, the events can be set at design time in the client side script or can be defined dynamically. Either way once the client side events for the above functions are defined (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 data is entered in the last row of the grid. The Band gives the level of hierarchy of the row in the grid. Depending on the level of the row, a new row is added. Once the row is added, the value for ID can be set to -1, for example, and on the server side processing, we can consider that all the rows with ID as -1 are new rows. This way, without making a server trip a new row is added.

The second example shows how to trap the keydown event on the grid. In this 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 a trip to the server.

The last example is the unique requirement I had in my project where the dropdown value in one of the columns 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 sets the drop down value. This code can be modified to make drop down dynamic as per our business requirements. The array LookUp used in the function should have been defined in the page.

Conclusion

Hope this sample code is useful for developers who want to navigate through DataGrids using client scripting.