After Paging in RadGrid Previous functionalities are lost and getting reset

[BRK]

Hi,

I have a RadGrid and we are doing some client side operations on it. But After Paging I am losing all the operations what we did previously using javascript. Help me so that all functionality remains unchanged after paging. Help me solving this. Here I will explain:


I have a Radgrid with one checkbox and one text box (By Default it will be "0"). using javascript If I check a checkbox the text in textbox must be changed to "100". If I did these operations and click paging and get return from paging all the functionality is missing and get reset.

Help me how can we achieve this without losing functionality after paging.

Thanks.

 

[Princy]

Hello Brk,

RadGrid loses its current selection when the data is sorted, a new group or filter is added, or when the current page changes. Check the following documentation which explains how to persist client-side selection.

Persisting the selected rows client-side on sorting/paging/filtering/grouping.

Thanks,
Princy.

[BRK]

Hi princy,

The link you provide is good but Its not working well. Still the functionalist are getting reset.
Here the JavaScript client implementations are missing when we are doing paging. So how can I
make that functionality done with Java-script not loosing.

Here If we check the "GridClientSelectColumn"  we are changing the text. This we done with Javascript. Now If I click paging
all this functionality is getting lost. I am giving the code below.

 
I have written code

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">

           var selected = {};
           function RadGrid1_RowSelected(sender, args) {
               var CustomerID = args.getDataKeyValue("schedule_Activities_id");
               if (!selected[CustomerID]) {
                   selected[CustomerID] = true;
               }
           }
           function RadGrid1_RowDeselected(sender, args) {
               var CustomerID = args.getDataKeyValue("schedule_Activities_id");
               if (selected[CustomerID]) {
                   selected[CustomerID] = null;
               }
           }
           function pageLoad(sender, args) {
               var dataItems = $find('<%=RadGrid1.ClientID %>').get_masterTableView().get_dataItems();
               for (var i = 0, j = dataItems.length; i < j; i++) {
                   var item = dataItems[i];
                   if (selected[item.getDataKeyValue("schedule_Activities_id")]) {
                       item.set_selected(true);
                   }
               }
           }

 //Completed checkbox function
           function Completed(chkBox1, txtbox, chkPercomp, remdur, msdatepicker, mfdatepicker) {
               var chkComplete = document.getElementById(chkBox1);
               var chkPerComplete = document.getElementById(chkPercomp);
               var pertext = $find(txtbox);
               var radremdur = $find(remdur);
               var msdatepicker = $find(msdatepicker);
               var mfdatepicker = $find(mfdatepicker);

               if (chkComplete.checked) {
                   chkPerComplete.checked = false;
                   chkPerComplete.style.display = 'none';
                   pertext.set_value(100);
                   pertext.disable();
                   radremdur.set_visible(false);
                   msdatepicker.clear();
                   msdatepicker.set_visible(false);
                   mfdatepicker.clear();
                   mfdatepicker.set_visible(false);
               }
           }

 </script>
    </telerik:RadCodeBlock >
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
                Transparency="25" Width="75px">
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border: 0px;" />
      </telerik:RadAjaxLoadingPanel>

            <div>
             <telerik:RadGrid ID="RadGrid1" Skin="WebBlue" runat="server" AllowFilteringByColumn="true"
                    AutoGenerateColumns="false" ShowStatusBar="True" GridLines="None"
                    AllowPaging="true" PageSize="20" AllowSorting="True" onitemdatabound="RadGrid1_ItemDataBound" AllowMultiRowSelection="True" >
                    <ClientSettings>
                    <Selecting AllowRowSelect="True"></Selecting>
                    <ClientEvents OnRowSelected="RadGrid1_RowSelected" OnRowDeselected="RadGrid1_RowDeselected" />
                </ClientSettings>
                <MasterTableView GroupLoadMode="Client" ClientDataKeyNames="schedule_Activities_id">
               <Columns>
                    <telerik:GridTemplateColumn UniqueName="lotid" HeaderText="Lot Id" AllowFiltering="false" Visible="false" >
                    <ItemTemplate>
                     <asp:Label ID="lot_id" runat="server" Text='<%#Eval("lot_id") %>'/>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="id" HeaderText="Schedule ActID" AllowFiltering="false" Visible="false">
                     <ItemTemplate>
                       <asp:Label ID="actid" runat="server" Text='<%#Eval("schedule_Activities_id") %>'/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="ActId" HeaderText="Schedule ActID" AllowFiltering="false" Visible="false">
                     <ItemTemplate>
                       <asp:Label ID="acttype" runat="server" Text='<%#Eval("act_type") %>'></asp:Label>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="delayreasoncode" HeaderText="Schedule ActID" AllowFiltering="false" Visible="false">
                        <ItemTemplate>
                            <asp:Label ID="delayreasoncode" runat="server" Text='<%#Eval("delay_reason_code") %>'></asp:Label>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Targeted Finish" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:Label ID="tagfinish" runat="server" Text='<%#Eval("org_finish_Date") %>'/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Job Type" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:Label ID="lblJobtype" runat="server" Text='<%#Eval("jobtype_code") %>'/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="gridTF" HeaderText="Total Float" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:Label ID="totfloat" runat="server" Text='<%#Eval("total_float") %>' Width="20px"/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Activity Description" UniqueName="activity_desc" AllowFiltering="true">
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="30%" Wrap="true" />
                     <ItemTemplate>
                       <asp:Label ID="actdesc" runat="server" Text='<%#Eval("activity_desc") %>' Width="200px" ToolTip= '<%#Eval("activity_desc") %>'/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Original Duration" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:Label ID="orgdur" runat="server" Text='<%#Eval("original_duration") %>' Width="20px"/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridDateTimeColumn UniqueName="schedstart" DataField="early_start_display" HeaderText="Scheduled Start" DataFormatString="{0:MM/dd/yyyy}" PickerType="DatePicker" AllowFiltering="false">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn UniqueName="schedfinish" DataField="early_finish_display" HeaderText="Scheduled Finish" DataFormatString="{0:MM/dd/yyyy}" PickerType="DatePicker" AllowFiltering="false">
                    </telerik:GridDateTimeColumn>

                    <telerik:GridClientSelectColumn UniqueName="Complete" HeaderText="Completed"    />






                    <telerik:GridTemplateColumn UniqueName="gridActStart" HeaderText="Actual Start" AllowFiltering="false">
                     <ItemTemplate>
                       <telerik:RadDatePicker ID="actstart" runat="server" MaxDate='<%# Convert.ToDateTime(Eval("early_start_display")).ToString("dd/MMM/yyyy") %>' Width="100px" Calendar-ShowOtherMonthsDays="false"
                        Calendar-ShowRowHeaders="false" DbSelectedDate='<%# Bind("actual_start") %>' DateInput-DateFormat="MM/dd/yyyy">
                       </telerik:RadDatePicker>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="gridActFinish" HeaderText="Actual Finish" AllowFiltering="false">
                     <ItemTemplate>
                       <telerik:RadDatePicker ID="actfinish" runat="server" Width="100px" MaxDate='<%# Convert.ToDateTime(Eval("early_start_display")).ToString("dd/MMM/yyyy") %>'
                       Calendar-ShowOtherMonthsDays="false" Calendar-ShowRowHeaders="false" DbSelectedDate='<%# Bind("actual_finish") %>' DateInput-DateFormat="MM/dd/yyyy"/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="perComplete" HeaderText="99% Complete" AllowFiltering="false">
                        <ItemTemplate>
                            <asp:Panel ID="Panel2" runat="server">
                                <%--<asp:CheckBox ID="Chkbox" runat="server" AutoPostBack="true" OnCheckedChanged="CheckedChanged"/>--%>
                                <asp:CheckBox ID="Chkbox" runat="server"/>
                            </asp:Panel>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="perComplete" HeaderText="Percent Complete" AllowFiltering="false">
                     <ItemTemplate>
                       <telerik:radnumerictextbox id="pct" runat="server" text='<%#Eval("pct") %>' minvalue="0" maxvalue="100" width="50px" FocusedStyle-BackColor="Yellow" NumberFormat-DecimalDigits="0">
                           <numberformat allowrounding="true" decimaldigits="4"/>
                       </telerik:radnumerictextbox>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Delay Reason" UniqueName="delay" AllowFiltering="false">
                     <ItemTemplate>
                        <asp:DropDownList ID="ddlCustomer_Type" runat="server"></asp:DropDownList>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Days Delayed" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:Label ID="Daysdelayed" runat="server" Text='<%#Eval("delay_days") %>' Width="20px" />
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="remDur" HeaderText="Remaining Duration" AllowFiltering="false">
                     <ItemTemplate>
                        <telerik:RadNumericTextBox ID="remdurNumtxt" runat="server" Text='<%#Eval("rem_duration")%>' Width="25px" MinValue="0" MaxValue='<%#Eval("original_duration") %>' />
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="On hold?" AllowFiltering="false">
                        <ItemTemplate>
                            <asp:Panel ID="ActPanel" runat="server">
                                <asp:CheckBox ID="actCheck" runat="server"  />
                            </asp:Panel>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="ddlSubcont" HeaderText="Subcontractor">
                     <ItemTemplate>
                       <asp:DropDownList ID="drplistcontact1" runat="server" AutoPostBack="true"></asp:DropDownList>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="gridMS" HeaderText="Mandatory Start" AllowFiltering="false">
                        <ItemTemplate>
                        <telerik:RadDatePicker ID="manstart" runat="server" Width="100px" Calendar-ShowOtherMonthsDays="false" Calendar-ShowRowHeaders="false" DbSelectedDate='<%# Bind("mandatory_start") %>'
                         MinDate='<%# Convert.ToDateTime(Eval("early_start_display")).AddDays(1).ToString("dd/MMM/yyyy") %>' DateInput-DateFormat="MM/dd/yyyy"/>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="gridMF" HeaderText="Mandatory Finish" AllowFiltering="false">
                     <ItemTemplate>
                       <telerik:RadDatePicker ID="manfinish" runat="server" Width="100px" Calendar-ShowOtherMonthsDays="false" Calendar-ShowRowHeaders="false" DbSelectedDate='<%# Bind("mandatory_finish") %>'
                        MinDate='<%# Convert.ToDateTime(Eval("early_start_display")).AddDays(1).ToString("dd/MMM/yyyy") %>' DateInput-DateFormat="MM/dd/yyyy"/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Log" UniqueName="Log" AllowFiltering="false">
                     <ItemTemplate>
                       <asp:TextBox ID="txtlog" runat="server" Text='<%#Eval("act_log") %>' Width="200px"/>
                     </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                </MasterTableView>
                <ClientSettings>
                <DataBinding SelectMethod="GetDataAndCount" EnableCaching="true" />



                <%--<Scrolling AllowScroll="true" EnableVirtualScrollPaging="true" UseStaticHeaders="true" SaveScrollPosition="true"/>--%>
            </ClientSettings>
             </telerik:RadGrid>
            </div>

VB

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)

  Dim delaytable As New DataTable()
        Dim delayquery As String = "SELECT delay_reason_code_id,delay_reason_code,concat(delay_reason_code,' - ',delay_reason_name) as delayreason FROM msm_delay_reason_codes m where client_id=17"

        conn = New MySqlConnection(connString)
        Dim adapter As New MySqlDataAdapter()
        adapter.SelectCommand = New MySqlCommand(delayquery, conn)
        ' Dim myDataSet As DataSet = New DataSet()
        myDataSet = New DataSet



        conn.Open()
        Try
            adapter.Fill(delaytable)
        Finally
            conn.Close()
        End Try

  If TypeOf e.Item Is GridDataItem Then
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
            Dim txtbox As RadNumericTextBox = DirectCast(item.FindControl("pct"), RadNumericTextBox)
            Dim datepicker As RadDatePicker = DirectCast(item.FindControl("actstart"), RadDatePicker)
            Dim remdur As RadNumericTextBox = DirectCast(item.FindControl("remdurNumtxt"), RadNumericTextBox)
            Dim msdatepicker As RadDatePicker = DirectCast(item.FindControl("manstart"), RadDatePicker)
            Dim mfdatepicker As RadDatePicker = DirectCast(item.FindControl("manfinish"), RadDatePicker)
            'Dim chkBox As CheckBox = DirectCast(item.FindControl("chkComplete"), CheckBox)
            Dim chkPerComp As CheckBox = DirectCast(item.FindControl("Chkbox"), CheckBox)

            Dim item1 As GridDataItem = DirectCast(e.Item, GridDataItem)
            Dim chkBox1 As CheckBox = DirectCast(item1("Complete").Controls(0), CheckBox)




            chkBox1.Attributes.Add("onclick", "return Completed('" + chkBox1.ClientID + "','" + txtbox.ClientID + "','" + chkPerComp.ClientID + "','" + remdur.ClientID + "','" + msdatepicker.ClientID + "','" + mfdatepicker.ClientID + "')")

End If


End Sub

I implemented this please help me so that we can have functionality not loss after paging

Help me

[BRK]

Hi Princy If I use this

GridSettingsPersister SavePersister = new GridSettingsPersister(RadGrid1);"

it will be helpful? or not for saving grid values?

[BRK]

Is there anyone help me in achieving my previous functionality when clicked paging. I just gave all the code we have used in the previous post and we used here. Please see and respond me back

[Veli]

Hi brk,

Try the following pageLoad() function to call the Completed method for every selected item:

function pageLoad(sender, args)
{
    setTimeout(function()
    {
        var dataItems = $find('<%=RadGrid1.ClientID %>').get_masterTableView().get_dataItems();
        for (var i = 0; i < dataItems.length; i++)
        {
            var item = dataItems[i];
            if (selected[item.getDataKeyValue("ID")])
            {
                var selectChkBox = item.get_cell("Complete").getElementsByTagName("input")[0];
                selectChkBox.click(); //selects  the item and calls the Completed method
            }
        }
    }, 100);
}

Kind regards,
Veli
the Telerik team

[BRK]

Hi veli,

Applied the code you provided. I got the result that when I applied to this Radgrid. whever I click paging its still showing a round circle which indicates that it is loading and getting struck.
Tell me how can I solve this issue.

Regards
brk

[Veli]

Do you get any javascript errors on the page? If any, what do they say? You can also try disabling AJAX at all and see if there is any server side exception that is thrown. Any further info on this issue would be helpful.

Veli
the Telerik team

[BRK]

Hi Veli,

Thanks for your reply.

I applied the code u given to me after paging it is not getting back to the previous state.
All the javascript functionality done before that all are getting lost. here Even i do paging
how can I retain the functionality?
Thanks

[Scott]

Just a note, since this is an old post, the link that was previously provided is no longer valid.  The page was moved here:

https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Selecting/persisting-selected-rows-server-side