Grid Sorting with AjaxManager

[Kent]

When I introduce a RadAjaxManager (which I now need for other reasons) it breaks my Sorting and Paging?  Any advice?

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Grid.ascx.vb" Inherits="WebDBMS.Grid" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<telerik:RadScriptManager ID="ScriptManager" runat="server" />

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
   <script type="text/javascript">
       var allowMenu = "<%=AllowMenu%>";

       function RowContextMenu(sender, eventArgs) {
           if (allowMenu == "True" && __ual == "99") {
               var menu = $find("<%=RadMenu1.ClientID %>");
               var evt = eventArgs.get_domEvent();

               if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                   return;
               }

               var index = eventArgs.get_itemIndexHierarchical();
               document.getElementById("radGridClickedRowIndex").value = index;

               sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

               menu.show(evt);

               evt.cancelBubble = true;
               evt.returnValue = false;

               if (evt.stopPropagation) {
                   evt.stopPropagation();
                   evt.preventDefault();
               }
           }
       }

       function RowDblClick(sender, args) {
           var grid = sender;
           var MasterTable = grid.get_masterTableView();
           var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
           var cell = MasterTable.getCellByColumnUniqueName(row, "ID");
           if (cell != null) {
               var value = cell.innerHTML;

               if (__name != null) {
                   var url = "../Forms/getEditForm.aspx?key=" + __name + "&id=" + value;
                   winopen(url, null, "toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1");
               }
           }
       }

       function OpenClick() {
           var grid = $find("<%=QueryRadGrid.ClientID %>");
           var MasterTable = grid.get_masterTableView();
           var row = MasterTable.get_selectedItems()[0];
           if (row != null) {
               var cell = MasterTable.getCellByColumnUniqueName(row, "ID");
               var value = cell.innerHTML;
               var url = "./Forms/getEditForm.aspx?key=" + __name + "&id=" + value;
               winopen(url, null, "toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1");
           }
       }
       function RepaintGrid() {
           var grid = $find("<%= QueryRadGrid.ClientID %>")
           grid.repaint();
       }

       function MassChange(sender, args) { // Customer Corrections Only
           var grid = $find("<%=QueryRadGrid.ClientID %>");
           var MasterTable = grid.get_masterTableView();
           var items = MasterTable.get_selectedItems();
           var itemIds = '';
           for (var i = 0; i < items.length; i++) {
               var row = items[i];
               var cell = MasterTable.getCellByColumnUniqueName(row, "ID");
               var value = cell.innerHTML;
               if (itemIds != '') itemIds += ',';
               itemIds += value;
           }
           if (itemIds != '') {
               if (confirm("Perform Mass Change?") == true) {
                   winopen('../Forms/MassChange.aspx?xx_tranid=' + itemIds, 'MassChange', 'width=800, height=500');
               }
           }
           return false;

       }
   </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
   <AjaxSettings>
       <telerik:AjaxSetting AjaxControlID="QueryRadGrid">
           <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
               <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
           </UpdatedControls>
       </telerik:AjaxSetting>
       <telerik:AjaxSetting AjaxControlID="RadMenu1">
           <UpdatedControls>
               <telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
               <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
           </UpdatedControls>
       </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicking="MassChange"
   EnableRoundedCorners="true" EnableShadows="true">
   <Items>
       <telerik:RadMenuItem Text="Mass Change" />
   </Items>
</telerik:RadContextMenu>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<telerik:RadGrid ID="QueryRadGrid" runat="server" style="width:100%; height:99%; position: absolute;"
    Font-Names="Verdana" GridLines="Horizontal" AllowSorting="True" ShowGroupPanel="True"
    Skin="Office2007" AllowPaging="True" PageSize="50" AutoPostBack="True">
    <MasterTableView>
        <HeaderStyle Wrap="false" />
    </MasterTableView>
    <ClientSettings AllowDragToGroup="True">
        <Scrolling UseStaticHeaders="true" AllowScroll="True" SaveScrollPosition="True"/>
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowDblClick="RowDblClick" />
    </ClientSettings>
    <PagerStyle AlwaysVisible="true" />
    <ExportSettings ExportOnlyData="true" IgnorePaging="true"/>
</telerik:RadGrid>

[Vasil]

Hello Kent,

In your JavaScript you have <%=AllowMenu%>. I believe AllowMenu is some local variable that you change between the server callbacks in the code-behind. After the Ajax call is performed your JavaScript stays the same as last time and will not be updated which could be the reason for it not to work properly.

To fix this you have to do 2 things:

1) Wrap the script inside a RadScriptBlock instead of RadCodeBlock
2) Set the RadScriptBlock to be updated control in the AjaxSettings:

ASPX:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">

      //your scripts

    </script>
</telerik:RadScriptBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="QueryRadGrid">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
        <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
        <telerik:AjaxUpdatedControl ControlID="RadScriptBlock1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="RadMenu1">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="QueryRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
        <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
        <telerik:AjaxUpdatedControl ControlID="RadScriptBlock1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManager>

Best wishes,
Vasil
the Telerik team