Click here to Skip to main content
15,112,951 members
Articles / Web Development / ASP.NET
Posted 16 Feb 2009


12 bookmarked

Persist Selections on WebDataGrid

Rate me:
Please Sign up or sign in to vote.
4.67/5 (5 votes)
16 Feb 2009CPOL2 min read
Persist selections on Infragistics WebDataGrid paging
Image 1


Infragistics components help us to develop stylish applications with nice functionalities. But still requirements are very wide and sometimes we will not get what we need. At such times, we will need to implement our own ways to fulfill the requirements.

We cannot find much Infragistics articles on the net if we search. This is the motive of publishing this article here for the 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.

Using the Code

Well there is no harm in thinking "if selection does not support between paging, why is this feature there". Since Infragistics WebDataGrid doesn't have this feature till I wrote 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 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.


My workaround for this selection issue is to:

  1. Place a hidden variable to store selected records thoughout the webdatagrid pagings
  2. On each PageIndexChange, save the currently selected row indexes to hidden variable.
  3. 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">
<ig:EditingCore AutoCRUD="False">
<ig:Selection CellClickAction="Row" RowSelectType="Multiple"> 

Note the two important client side events declared:

  1. PageIndexChanging="WebDataDrid2_PageIndexChanging"
  2. PageIndexChanged="WebDataDrid2_PageIndexChanged"


Here is the code associated with this event:

function WebDataDrid2_PageIndexChanging() {

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:


It is of format pagenum_rowindex|…


Next is the event after a page index change happens.

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[i].split("_");
        if (parseInt(arr2[0]) == pageindex) {
            var rowindex = parseInt(arr2[1]);

This restores 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 = '';

    for (var i = 0; i < pagecount; i++) {
        for (var j = 0; j < pagesize; j++) {
            strSelection += i + "_" + j + "|";
    hidSelections = document.getElementById("hidSelections");
    hidSelections.value = strSelection;
*Somebody may notice a minor bug around for loop. But I think this is far enough for a demonstration

The idea is simply add all the row/page values (e.g.: 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

There will still be limitations which are not discussed in this article. But I hope this will give an idea to implement that which matches your own requirements.


  • 17th February, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Praveen Nair (NinethSense)
India India
Praveen.V.Nair - aka NinethSense - PMP, Microsoft MVP - is working as a Head of Technology and Architecture at Orion India Systems, Kochi, India. He has been playing with electronics from the age of 10 and with computers from the age of 14. He usually blogs at

Comments and Discussions

GeneralMy vote of 4 Pin
sumitmishra4818-Feb-11 14:21
Membersumitmishra4818-Feb-11 14:21 
QuestionWhy use a hidden field when you have the ViewState object at your disposal? Pin
Andrei Ion Rînea25-Feb-09 5:00
MemberAndrei Ion Rînea25-Feb-09 5:00 
AnswerRe: Why use a hidden field when you have the ViewState object at your disposal? Pin
Praveen Nair (NinethSense)25-Feb-09 5:05
MemberPraveen Nair (NinethSense)25-Feb-09 5:05 

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

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