How to maintain checkbox state across paging in telerik radgrid

[UMA MAHESWARA RAO]

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PrePopulateAnswer.ascx.cs"
    Inherits="ctrlPrePopulate" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script type="text/javascript">
    var RadGrid1;
    var DataItems;
    function gridCreated(sender, args) {
        RadGrid1 = sender;

    }

    function CheckAll(headerCheckBox) {
        var isChecked = headerCheckBox.checked;

        var checkboxes = RadGrid1.get_masterTableView().get_element().getElementsByTagName("INPUT");

        var index;
        for (index = 0; index < checkboxes.length; index++) {
            if (typeof (checkboxes[index].checked) !== "undefined") {
                if (isChecked) {
                    checkboxes[index].checked = true;
                }
                else {
                    checkboxes[index].checked = false;
                }
            }
        }
    }

</script>
<style type="text/css">
    .LinkButtonurl
    {
        color: #0033FF;
        font-size: 13px;
    }
</style>
<style type="text/css">
    .Grid
    {
        border: 1px #000000 solid;
        border-spacing: 0px;
    }
</style>
<asp:Panel ID="pnlElement" runat="server">
    <table class="GridOuterTable">
        <tr>
            <td>
                <table class="InnerForm">
                    <tr>
                        <td class="OuterTable">
                            <br />
                            <div style="vertical-align: middle; margin-left: 25px;">
                                <span style="font-family: 'Arial'; color: #000000; font-size: 13px;"><b>Form Name:
                                    <asp:Label runat="server" ID="lblFormName"></asp:Label></b></span>
                            </div>
                            <br />
                            <center>
                                <div style="vertical-align: middle; margin-left: 20px;">
                                    <asp:LinkButton ID="lbtnCancel1" runat="server" CssClass="SecondaryButton" Text="Cancel"
                                        OnClick="lbtnCancel_Click"></asp:LinkButton>
                                    <asp:LinkButton runat="server" Text="Save" ID="lbtnSave" CssClass="MainButton" OnClick="lbtnSave_Click"></asp:LinkButton>
                                </div>
                            </center>
                            <div style="vertical-align: middle; margin-left: 25px;" class="InformationIcon">
                                <asp:Panel runat="server" ID="pnl">
                                    This option will use the answers provided the last time the user completed this
                                    form.<br />
                                    In order for the option to work as expected, the user and participant/entity/program/staff
                                    must match the user and participant from the last time this form was completed.
                                </asp:Panel>
                            </div>
                            <div style="vertical-align: middle; margin-left: 18px;">
                                <asp:CheckBoxList runat="server" RepeatDirection="Vertical" ID="chklstPrepopulate"
                                    CssClass="Aligntext" OnSelectedIndexChanged="chklstPrepopulate_SelectedIndexChanged"
                                    AutoPostBack="true" />
                                <br />
                            </div>
                            <div id="divGridLabel" runat="server" style="vertical-align: middle; margin-left: 25px;">
                                Select the Questions you wish to populate with previous answers
                            </div>
                            <br />
                            <div id="divGrid" runat="server" style="vertical-align: middle; margin-left: 25px;
                                margin-right: 10px;">
                                <telerik:RadGrid ID="gvPrepopulate" DataSourceID="odsRadGrid" runat="server" GridLines="None"
                                    CssClass="AddBorders" ShowStatusBar="True" CellSpacing="0" AllowPaging="True"
                                    PageSize="20" PagerStyle-AlwaysVisible="true" OnItemDataBound="gvPrepopulate_ItemDataBound"
                                    AllowMultiRowSelection="True" HeaderStyle-HorizontalAlign="Left" Width="100%">
                                    <HeaderStyle BackColor="red" />
                                    <GroupingSettings CaseSensitive="false" />
                                    <ClientSettings EnableRowHoverStyle="false">
                                        <Selecting AllowRowSelect="false" />
                                        <ClientEvents OnGridCreated="gridCreated" />
                                    </ClientSettings>
                                    <MasterTableView EditMode="InPlace" AllowFilteringByColumn="True" ShowFooter="True"
                                        DataKeyNames="FormElementID" TableLayout="Auto" AutoGenerateColumns="false" DataSourceID="odsRadGrid"
                                        HeaderStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Left" FilterItemStyle-HorizontalAlign="Left"
                                        FilterItemStyle-VerticalAlign="Bottom">
                                        <PagerStyle AlwaysVisible="True" />
                                        <HeaderStyle CssClass="InnerHeaderStyle" Font-Bold="true" />
                                        <CommandItemSettings ExportToPdfText="Export to PDF" />
                                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                        </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridTemplateColumn Visible="false">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblElementID" runat="server" Text='<%# Eval("FormElementID") %>'></asp:Label>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridTemplateColumn AllowFiltering="false" ShowFilterIcon="False" UniqueName="Temp">
                                                <HeaderTemplate>
                                                    <asp:CheckBox ID="chkHeader" runat="server" onclick="CheckAll(this);" />
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkPrepopulate" runat="server" Checked='<%# Eval("AllowPrePopulate") %>' />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn AndCurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"
                                                DataField="Stimulus" FilterControlWidth="100%" HeaderStyle-HorizontalAlign="Left"
                                                HeaderText="Questions" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="70%"
                                                ReadOnly="True" ShowFilterIcon="false" SortExpression="Questions" UniqueName="Questions">
                                                <HeaderStyle HorizontalAlign="Left" />
                                                <ItemStyle HorizontalAlign="Left" Width="70%" />
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn AndCurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true"
                                                DataField="FormElementType" FilterControlWidth="100%" HeaderText="Question Type"
                                                ItemStyle-HorizontalAlign="Left" ItemStyle-Width="30%" ShowFilterIcon="false"
                                                SortExpression="Question Type" UniqueName="Question Type">
                                                <ItemStyle HorizontalAlign="Left" Width="30%" />
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                        <EditFormSettings>
                                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                            </EditColumn>
                                        </EditFormSettings>
                                        <FilterItemStyle HorizontalAlign="Left" VerticalAlign="Bottom" />
                                    </MasterTableView>
                                    <FilterMenu EnableImageSprites="true">
                                    </FilterMenu>
                                    <PagerStyle AlwaysVisible="True" />
                                    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                                    </HeaderContextMenu>
                                </telerik:RadGrid>
                            </div>
                            <asp:ObjectDataSource ID="odsRadGrid" runat="server" SelectMethod="GetGroupQuestionElementAll"
                                TypeName="SocialSolutions.ETOSoftware.BusinessLayer.SingleForm">
                                <SelectParameters>
                                    <asp:QueryStringParameter Name="FormID" QueryStringField="FormID" Type="Int32" />
                                    <asp:Parameter DefaultValue="False" Name="IsGroup" Type="Boolean" />
                                    <asp:SessionParameter Name="_sessionData" SessionField="SessionData" Type="Object" />
                                </SelectParameters>
                            </asp:ObjectDataSource>
                            <br />
                            <center>
                                <div style="vertical-align: middle; margin-left: 20px;">
                                    <asp:LinkButton ID="lbtnCancel" runat="server" CssClass="SecondaryButton" Text="Cancel"
                                        OnClick="lbtnCancel_Click"></asp:LinkButton>
                                    <asp:LinkButton runat="server" Text="Save" ID="lbtnSave2" CssClass="MainButton" OnClick="lbtnSave_Click"></asp:LinkButton>
                                </div>
                            </center>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</asp:Panel>

[Shinu]

Hello,

Take a look at the following help documentation.
Persisting CheckBox control state in GridTemplateColumn on rebind.

-Shinu.

[UMA MAHESWARA RAO]

This is not working for me that's why i post my code.

[jenny]

I have the same problem too...on the first page i selected on the items then when i go to next page and go back to first page
my selected items is not visible.

here is my code:
 <telerik:RadGrid ID="rg_ExportResponse" Width="97%" OnNeedDataSource="rg_ExportResponse_NeedDataSource" runat="server"
     AllowSorting="True"  PageSize="10" AllowPaging="True" OnPreRender="rg_ExportResponse_PreRender" OnItemCreated="rg_ExportResponse_ItemCreated" onSelectedIndexChanged="rg_ExportResponse_SelectedIndexChanged" AllowMultiRowSelection="True" Gridlines="None" >
            
             <MasterTableView Width="100%" Summary="RadGrid table" />    
           <PagerStyle Mode="NextPrevAndNumeric"/>
            
        <SelectedItemStyle CssClass="SelectedItem" />
    
  <MasterTableView AutoGenerateColumns="false">
            <Columns>
            <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">                    
                            <HeaderTemplate>
                             <asp:CheckBox id="chkHeaderSelection" OnCheckedChanged="ToggleSelectedState" AutoPostBack="True" runat="server"></asp:CheckBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox id="chkRowSelection" OnCheckedChanged="ToggleRowSelection" AutoPostBack="True" runat="server"></asp:CheckBox>
                            </ItemTemplate>
             </telerik:GridTemplateColumn>

                <telerik:GridBoundColumn  UniqueName="ItemID" DataField="item_id" DataType="System.Int32" HeaderText="Item ID" Display="false" />
                    <telerik:GridBoundColumn  UniqueName="item_text" DataField="item_text" DataType="System.String" HeaderText="Question Type"/>
            </Columns>

   </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true"  EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

[DAVE]

I'm having a similar issue. The provided code example is not working for me either.

[Eyup]

Hello Dave,

If you want to preserve the selected items across different pages, you can use the approach provided in the following article:
http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-client-sorting-paging-grouping-filtering.html

And you can examine the web site sample attached to the last post for an actual implementation:
http://www.telerik.com/support/code-library/get-selected-items-through-all-pages#1eTU8nr-GUG8zfGgOGbIcA

Hope this helps.

Regards,
Eyup
Telerik

 

 

[amol]

Hi, I have similar issue. I am using radgrid in wpf application. Selection is not persisted when i switches between pages.