Click here to Skip to main content
Click here to Skip to main content

Navigating through DataGrid / Infragistics WebGrid using JavaScript

, 20 Oct 2005
Rate this:
Please Sign up or sign in to vote.
This sample code gives you some insight into navigating through DataGrids using client script.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Ezhilan Muniswaran
Web Developer
United States United States
Ezhilan Muniswaran has more than twelve years of experience in Software development mostly in Microsoft Technologies.
MCSD in .NET and Visual Studio 6.0

Comments and Discussions

 
Generalmove focus outside the grid when pressing "enter" key on a cell of the last row Pinmemberbullich6-Jan-10 1:17 
GeneralUsing Footer total in textbox on ASP.net page PinmemberJCCDevel18-May-09 4:08 
Questionhow can I get the selected row's value? [modified] Pinmemberzhou_ye_lai26-May-08 15:44 
How can I get the value of the selected row by javascript when the mouse is pressed down?
 
Do myself!
modified on Monday, May 26, 2008 10:39 PM

AnswerRe: how can I get the selected row's value? Pinmemberzhou_ye_lai26-May-08 16:39 
GeneralRe: how can I get the selected row's value? Pinmemberorizg9-Jun-08 10:52 
GeneralWorry PinmemberRunno12324-Oct-06 2:35 
GeneralIt is useful PinmemberNaga Rajendra Kumar4-Jun-06 20:59 
GeneralGood Article Pinmembershashankkadge14-Nov-05 9:58 
GeneralRe: Good Article Pinmembersachinthamke12-May-11 2:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 20 Oct 2005
Article Copyright 2005 by Ezhilan Muniswaran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid