Persist Selections on WebDataGrid

Introduction

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.

Background

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.

Workaround

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">
<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 declared:

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

PageIndexChanging

Here is the code associated with this event:

function WebDataDrid2_PageIndexChanging() {
    GetGridSelectedRows("");
}

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_rowindex|…

PageIndexChanged

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]);
            selectedRows.add(rows.get_row(rowindex));
        }
}
}

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;
    SetGridSelectedRows(gridname);
}

*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.

History

• 17^th February, 2009: Initial post