Hi everybody, i'm wandering if someone can help me in the following scenario.
I have multiple grids within update panel where selection on one grid changes data in other grids. Grids are dynamically populated based on filter built from selection on all grids. Grids have paging and sorting enabled and there could be thousands of rows in the single grid.
My problem is that to have paging and sorting working fast I need ajax to be enabled. On the other hand when ajax is enabled, row selection change does not update other grids. In fact, grids are getting populated in the code behind but they are not getting updated on the page.
I wander if there is a solution where I can keep ajax turned on and have other grids populated and updated on page.
Thanks in advance for any suggestion.
Hello Bane,
Thank you for posting in our forum.
Generally you can’t change a grid during the ajax callback of another grid. During the ajax callback only changes related to the control that caused it are reflected on the page.
I’ve explained this in more detail here:
http://community.infragistics.com/forums/p/68145/345224.aspx#345224
If you need to keep the ajax but still update one control based on actions on another you could manually trigger an ajax callback from the client side for the second control.Currently the only way to trigger an ajax callback is by invoking some operation on the second controls.
For example you could handle the client side RowSelectionChanged event and in it make a manual “dummy” change on the second grid and commit it. For example:
function WebDataGrid1_Selection_RowSelectionChanged(sender, eventArgs) { ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param> ///<param name="eventArgs" type="Infragistics.Web.UI.RowSelectionChangedEventArgs"></param> var grid2 = $find("WebDataGrid2"); var val = grid2.get_rows().get_row(0).get_cell(2).get_value() +" " grid2.get_rows().get_row(0).get_cell(2).set_value(val); grid2.get_behaviors().get_editingCore().commit(); }
function WebDataGrid1_Selection_RowSelectionChanged(sender, eventArgs)
{
///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.RowSelectionChangedEventArgs"></param>
var grid2 = $find("WebDataGrid2");
var val = grid2.get_rows().get_row(0).get_cell(2).get_value() +" "
grid2.get_rows().get_row(0).get_cell(2).set_value(val);
grid2.get_behaviors().get_editingCore().commit();
}
This will cause an ajax callback for the second grid and trigger the RowUpdating event during which you can manually make the changes you need. The RowSelectionChanged event will also have fired so you’ll have the current selected row from the first grid. During this event you can set a new data source for the grid and data bind it. You may also have to call the RequestFullAsyncRender method of the grid to reflect the changes.
You can refer to the attached sample.
Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://www.infragistics.com/support
Dear Maya, that's it. Thanks very much for your help.