How to maintain checkbox state across paging in telerik radgrid

6 posts, 0 answers
  1. UMA MAHESWARA RAO
    UMA MAHESWARA RAO avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Feb 2012 Link to this post

    <%@ 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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Feb 2012 Link to this post

    Hello,

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

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. UMA MAHESWARA RAO
    UMA MAHESWARA RAO avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Feb 2012 Link to this post

    This is not working for me that's why i post my code.
  5. jenny
    jenny avatar
    5 posts
    Member since:
    Jun 2011

    Posted 02 Aug 2012 Link to this post

    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>

  6. DAVE
    DAVE avatar
    1 posts
    Member since:
    Jul 2011

    Posted 23 Apr 2015 Link to this post

    I'm having a similar issue. The provided code example is not working for me either.
  7. Eyup
    Admin
    Eyup avatar
    3013 posts

    Posted 28 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017