How do you Manage Infragistics WebGrid Data from JavaScript/Ajax code?

Question

I am working on a project that I need to use the Infragistics WebGrid control for some lists of data. I am loading the data on the client-side using JavaScript for display on a Map, and then I need to display that same data within multiple WebGrids. All the data available will be displayed in the WebGrids, but only a subset of the data (only that which is currently within view) will be plotted on the Map at any given time. Since I am loading the data using JavaScript/Ajax, I would like to only load it once, and use the same mechanism to populate the WebGrid control with data too.

Does anyone have any tips/pointers on working with the WebGrid completely from within client-side JavaScript/Ajax code?

Answer 1

The only thought that comes to mind is performance-related. We found that dynamically creating and populating rows for an UltraWebGrid was appreciably slower than we would have liked. (In our case we were moving rows from one grid to another and hit performance issues when the number of rows was too great.)

If I was doing something like you describe today, I would populate the grid from the server side if at all possible, and the display the relevant values on the Map from there.

As an added disclaimer, we used Infragistics 2007.1; I do not know if 2008.x is better in this area.

Answer 2

The Infragistics webgrids expose a very complex client side object model that you will be able to use to populate your data client side.

The first thing you will want to do is get a look at the full CSOM for the webgrid control, you can find the current doc version at: http://help.infragistics.com/NetAdvantage/NET/2008.3/CLR2.0/

To make a short example, you will need to grab a refence to your grid(s) and then add some rows and data. It would probably be easier to setup the column definitions for your grids at design time, rather than try to do it all in the javascript.

First: get a refrence to your grid:

var grid = igtbl_getGridById('dataGridControlID');

Then add a new row:

var newRow = grid.Rows.addNew()

After thats done you can loop the columns of your row to fill the data:

var oCols = newRow.Band.Columns;
for(var i=0; i < oCols.length; i++) {
    newRow.getCell[i].setValue(yourValue)
}

or address each one by key to populate its data:

newRow.getCellFromKey(colKey).setValue(yourValue,fireEvents);