Sort Problem in RadGrid

[Eng.Bassel Samman]

Dears,

I have a RadGrid with Enabled sorting on columns and I am using a RadAjaxManger in page to update RadGrid data. I noticed that clicking on any column in order to sort caused a page postback. So, what should I add to RadAjaxManager in the page to prevent page post back?

 

[Princy]

Hello Bessel,


You could either place RadGrid in RadAjaxPanel or use RadAjaxManager to prevent page refresh when sorting happens.


The following mark-up shows the usage of RadAjaxManager to prevent page reload.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="RadGrid1">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                  </UpdatedControls>
              </telerik:AjaxSetting>
          </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" ShowFooter="true"
          ShowHeader="true" AllowSorting="true">
          <MasterTableView TableLayout="Fixed">
              <Columns>
                  <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" UniqueName="LastName">
                  </telerik:GridBoundColumn>
              </Columns>
          </MasterTableView>
      </telerik:RadGrid>

Thanks,
Princy.

[Eng.Bassel Samman]

I tried that before but it did not solve the problem, In my page I add:

window.onbeforeunload = confirmExit;

where ConfirmExit is a javascript function asks user before leaving the page.
please check the page html

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
                  <telerik:AjaxSetting AjaxControlID="grd">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="DataChanged" UpdatePanelRenderMode="Inline" />
                <telerik:AjaxUpdatedControl ControlID="strGuid" UpdatePanelRenderMode="Inline" />
                 <telerik:AjaxUpdatedControl ControlID="grd" UpdatePanelRenderMode="Inline" />
            </UpdatedControls>
        </telerik:AjaxSetting>

    </AjaxSettings>
</telerik:RadAjaxManager>
    <telerik:RadGrid ID="grd" runat="server" AutoGenerateColumns="False" GridLines="None"
                    Skin="Office2007" AllowSorting="true">
                    <MasterTableView TableLayout="Fixed" EditMode="EditForms" CommandItemStyle-HorizontalAlign="Right"
                        Dir="RTL" DataKeyNames="ID">
                        <NoRecordsTemplate>
                            لا يوجد بيانات
                        </NoRecordsTemplate>
                        <Columns>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn/"
                                Resizable="False" CancelText="إغلاق" EditText="تعديل" UpdateText="موافق">
                                <HeaderStyle Width="35px" />
                                <ItemStyle HorizontalAlign="Center" Width="55px" />
                            </telerik:GridEditCommandColumn>
                            <telerik:GridButtonColumn ConfirmDialogType="RadWindow" ButtonType="ImageButton"
                                CommandName="Delete" Text="حذف" UniqueName="DeleteColumn/">
                                <HeaderStyle Width="35px" />
                            </telerik:GridButtonColumn>
                            <telerik:GridCheckBoxColumn HeaderText="فعال" UniqueName="grdSTATUS" DataField="STATUS"
                                DataType="System.Decimal" DefaultInsertValue="1">
                                <HeaderStyle Width="50px" HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Center" />
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridBoundColumn DataField="L1_NAME" HeaderText="الاسم العربي*" UniqueName="grdL1_NAME*">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="L2_NAME" HeaderText="الاسم الأجنبي" UniqueName="grdL2_NAME">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <EditFormSettings EditFormType="Template">
                            <EditColumn UniqueName="EditCommandColumn1">
                            </EditColumn>
                            <FormTemplate>
                                <asp:Panel ID="panEdit" runat="server" DefaultButton="btnOk" Width="100%">
                                    <table id="tblEdit" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                                        style="border-collapse: collapse; background: white; font-family: Arial; font-size: 15px; color:Navy; background-color: InfoBackground;">
                                        <tr>
                                            <td style="width:80px;"  >
                                            </td>
                                            <td >
                                                <asp:CheckBox ID="chkStatus" runat="server" Text="فعال" Checked='<%# Bind("STATUS") %>'
                                                    TabIndex="1"></asp:CheckBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td  >
                                                الاسم العربي:*
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtL1_NAME" runat="server" Text='<%# Bind("L1_NAME") %>' TabIndex="2"
                                                    MaxLength="64" Width="250px" ToolTip="الاسم العربي"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="rfvtxtL1_NAME" runat="server" ErrorMessage="*" ControlToValidate="txtL1_NAME"
                                                    SetFocusOnError="true"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                الاسم الأجنبي:
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtL2_NAME" runat="server" Text='<%# Bind("L2_NAME") %>' TabIndex="3"
                                                    MaxLength="64" CssClass="EnglishText" Width="250px" ToolTip="الاسم الأجنبي">
                                                </asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td style="text-align: right">
                                                <asp:ImageButton ID="btnOk" runat="server" CommandName="Update" CausesValidation="true"
                                                    ImageUrl="~/App_Themes/Images/Update.gif" TabIndex="4" />
                                                <asp:ImageButton ID="btnClose" runat="server" CommandName="Cancel" CausesValidation="false"
                                                    ImageUrl="~/App_Themes/Images/Cancel.gif" TabIndex="5" />
                                                </EditColumn>
                                            </td>
                                        </tr>
                                    </table>
                                </asp:Panel>
                            </FormTemplate>
                        </EditFormSettings>
                        <CommandItemStyle HorizontalAlign="Right"></CommandItemStyle>
                    </MasterTableView>
                    <SortingSettings SortedBackColor="white" EnableSkinSortStyles="false" />
                    <HeaderStyle HorizontalAlign="Center" />
                    <ClientSettings>
                        <Scrolling AllowScroll="True" ScrollHeight="500px" />
                    </ClientSettings>
                </telerik:RadGrid>

[Pavlina]

Hello,

Can you please also provide the code to populate the grid with data, as well as the javascript code you use?

Best wishes,
Pavlina
the Telerik team

[Eng.Bassel Samman]

Ok,

function confirmExit()
{
 var blnDataChanged = $(":hidden[id$=DataChanged]").val();
 if (blnDataChanged && blnDataChanged == 1) return  'Message' ;
}

-------------------------------------------------------------------------------
Protected Sub grd_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles grd.NeedDataSource
        BindData()
End Sub

Private Function BindData() As DataTable
     Dim DT As New DataTable
     DT = FillGrd(V_MR_NAMES, "", grd, "MR_TYPES_ID=" & treTypes.SelectedNode.Value & " ORDER BY L1_NAME ", "<MR_TYPES_ID>MR_TYPES_ID</MR_TYPES_ID>")
     grd.DataSource = DT
     BindData = DT
End Function

[Pavlina]

Hello,

I tested the provided code by using the additional information but I’m still not able to replicate the issue.
Please open a regular support ticket and send us sample runnable application which represents your problem. We will test it locally and advise you further.

Sincerely yours,
Pavlina
the Telerik team