Click here to Skip to main content
Click here to Skip to main content

Persist Selections on WebDataGrid

, 16 Feb 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Persist selections on Infragistics WebDataGrid paging

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

  • 17th February, 2009: Initial post

License

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

Share

About the Author

Praveen Nair (NinethSense)
Architect ORION INDIA SYSTEMS
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 http://blog.ninethsense.com/.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 4 Pinmembersumitmishra4818-Feb-11 14:21 
QuestionWhy use a hidden field when you have the ViewState object at your disposal? PinmemberAndrei Rinea25-Feb-09 5:00 
Why use a hidden field when you have the ViewState object at your disposal?
 

AnswerRe: Why use a hidden field when you have the ViewState object at your disposal? PinmemberNinethSense25-Feb-09 5:05 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 17 Feb 2009
Article Copyright 2009 by Praveen Nair (NinethSense)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid