After Paging in RadGrid Previous functionalities are lost and getting reset

9 posts, 0 answers
  1. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2011 Link to this post

    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.

     
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jun 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2011 Link to this post

    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
  5. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 09 Jun 2011 Link to this post

    Hi Princy If I use this

    GridSettingsPersister SavePersister = new GridSettingsPersister(RadGrid1);"
    it will be helpful? or not for saving grid values?
  6. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2011 Link to this post

    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
  7. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 14 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 17 Jun 2011 Link to this post

    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
  9. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 20 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. BRK
    BRK avatar
    35 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017