Applies to:
Infragistics NetAdvantage .NET CLR 3.x
Assembly: Infragistics35.Web.v8.3
Runtime Version: v2.0.50727
Version: 8.3.20083.2039
Visual Studio 2008
ASP.NET 3.5, C#
Infragistics components helps us to develop stylish applications with nice functionalities. But still requirements are very wide and sometimes we will not get what we need. In that times, we will need to implement our own ways to fulfill the requirements.
We cannot find much Infragistics articles on the net if you search. This is the motive of publishing this article here for public.
Customer Support: I would like to inform you that you can get the selected rows from the current data page not from the previous datapage
Customer Support: Because as you change the data page the WebDataGrid is bound to another set of data which is different from the earlier ones.
Customer: Ok. Do you see any workarounds/fix?
Customer Support: This cannot be fixed as this is not any problem this is expected as normal behavior
Well there is no harm in thinking "if selection do not support between paging why there is this feature". Since Infragistics WebDataGrid doesnt have this feature till I write this article, I will try to fix the issue with javascript and Infragistics' so called CSOM (Client-Side Object Model).
Thinking why not code-behind and use complex javascript?
Because we will need to use Paging.PageIndexChanged() code behind code and is not helpful due to some inabilities. Read from the Customer Support itself:
Customer Support: don't try to get the information of selected rows on PageIndexChanged
Customer Support: because by then this information and data is lost
Wordaround
My workaround for this selection issue is to:
- Place a hidden variable to store selected records though out the webdatagrid pagings
- On each PageIndexChange, save the currently selected row indexes to hidden variable
- On each PageIndexChange, set the previously selected rows as selected.
Hidden Field
First place a hidden field somewhere on the page. Here is mine:
<asp:HiddenField ID="hidSelections" runat="server" />
Here is a typical Infragistics WebDataGrid design code:
<ig:WebDataGrid ID="WebDataGrid2" runat="server" Height="350px" Width="400px"
DataKeyFields="PMAreaID">
<Behaviors>
<ig:EditingCore AutoCRUD="False">
</ig:EditingCore>
<ig:Selection CellClickAction="Row" RowSelectType="Multiple">
</ig:Selection>
<ig:RowSelectors>
</ig:RowSelectors>
<ig:Paging>
<PagingClientEvents
PageIndexChanging="WebDataDrid2_PageIndexChanging"
PageIndexChanged="WebDataDrid2_PageIndexChanged"
/>
</ig:Paging>
<ig:Activation>
</ig:Activation>
</Behaviors>
</ig:WebDataGrid>
Note the two important client side events delcared:
- PageIndexChanging="WebDataDrid2_PageIndexChanging" and
- PageIndexChanged="WebDataDrid2_PageIndexChanged"
PageIndexChanging
Here is the code associated with this event:
function WebDataDrid2_PageIndexChanging() {
GetGridSelectedRows("<%= this.WebDataGrid2.ClientID %>");
}
function GetGridSelectedRows(gridname) {
// sample gridname - "< % = this.WebDataGrid1.ClientID % >"
var grid = $find(gridname);
var behav = grid.get_behaviors();
var selection = behav.get_selection();
var pageindex = behav.get_paging().get_pageIndex();
var selectedRows = selection.get_selectedRows();
var strSelection = '';
hidSelections = document.getElementById("hidSelections");
for (i = 0; i < selectedRows.get_length(); i++) {
var item = pageindex + "_" + selectedRows.getItem(i).get_index() + "|";
if (hidSelections.value.indexOf(item) < 0) {
strSelection += item;
}
}
hidSelections.value = hidSelections.value + strSelection;
}
This javascript function will save indexes of the grid selections to the hidden variable hidSelections. The value stored in grid will be something like:
0_1|0_2|0_3|0_6|1_2|4_1|4_2|4_3|
It is of format pagenum_rowindx|…
PageIndexChanged
Next is the event after a page index change happen.
function WebDataDrid2_PageIndexChanged() {
SetGridSelectedRows("<%= this.WebDataGrid2.ClientID %>");
}
function SetGridSelectedRows(gridname) {
var grid = $find(gridname);
var behav = grid.get_behaviors();
var selection = behav.get_selection();
var selectedRows = selection.get_selectedRows();
var pageindex = behav.get_paging().get_pageIndex();
var rows = grid.get_rows();
hidSelections = document.getElementById("hidSelections");
arr = hidSelections.value.split("|")
for (var i = 0; i < arr.length; i++) {
arr2 = arr.split("_");
if (parseInt(arr2[0]) == pageindex) {
var rowindex = parseInt(arr2[1]);
selectedRows.add(rows.get_row(rowindex));
}
}
}
This restore the selection state of old pages while grid paging.
This is all about retaining or persisting page selections between grid paging. Now some tips like select all, select none etc.
Select All
function SelectAll() {
var gridname = "<%= this.WebDataGrid2.ClientID %>";
var grid = $find(gridname);
var behav = grid.get_behaviors();
var pagesize = behav.get_paging().get_pageSize();
var pagecount = behav.get_paging().get_pageCount();
var strSelection = '';
var restrict = 25; // allowed to select only this much suppliers
for (var i = 0; i < pagecount; i++) {
for (var j = 0; j < pagesize; j++) {
if (restrict-- <= 0) continue;
strSelection += i + "_" + j + "|";
}
}
hidSelections = document.getElementById("hidSelections");
hidSelections.value = strSelection;
SetGridSelectedRows(gridname);
}
The idea is simply add all the row/page values (eg: 0_1|0_2|…) to the hiddenvariable and call PageIndexChanged event.
Select None
This is very simple. Just make the value of hidden variable to null.
function SelectNone() {
selectGrid("<%= this.WebDataGrid1.ClientID %>", false);
hidSelections = document.getElementById("<%= this.hidSelections.ClientID %>");
hidSelections.value = "";
}
End Note
Still there will be limitations which are not discussed in this article. But I hope this will give an idea to implement which matches your own requirement .
Post your comments
About the Author
Praveen.V.Nair aka NinethSense, a technology enthusiast and Microsoft MVP Awardee. You can find more about him on his website http://www.ninethsense.com and his blog http://blog.ninethsense.com.