This is a migrated thread and some comments may be shown as answers.

How to maintain checkbox state across paging in telerik radgrid

6 Answers 981 Views

Grid

This is a migrated thread and some comments may be shown as answers.

UMA MAHESWARA RAO asked on 08 Feb 2012, 12:19 PM

<%@ 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>

6 Answers, 1 is accepted

answered on 03 Aug 2012, 01:01 AM

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>

answered on 28 Apr 2015, 11:13 AM

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.

answered on 28 Dec 2017, 08:21 AM

paging.png

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