New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Migration from ASP.NET (Classic) to ASP.NET AJAX

To migrate a Web application from RadGrid "Classic" to RadGrid for ASP.NET AJAX you need to follow these steps:

  • Make sure you have installed ASP.NET AJAX.

  • Add a ScriptManager or RadScriptManager control to the page (or user control) in which you want to add any UI control for ASP.NET AJAX.

        <asp:ScriptManager ID="ScriptManager1" runat="server" />
````

    If your page is a content page, add the ScriptManager control in your master page.

    • Drag and drop a control from the UI for ASP.NET AJAX package or manually copy the Telerik.Web.UI.dll in the Bin folder.

    • Replace the classic RadGrid directive

        <%@ Register TagPrefix="rad" Namespace="Telerik.WebControls" Assembly="RadGrid.Net2" %>
````

    with the new one of RadGrid for ASP.NET AJAX:

        <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
````
    • Replace the classic RadGrid controls declarations:
        <rad:RadGrid ID="RadGrid1" runat="server" ...
````

    with the new RadGrid declarations:

        <telerik:RadGrid ID="RadGrid1" runat="server" ...
````
    • In the code behind, update the using (C#) or Imports (VB) statements. Replace "Telerik.WebControls" with the new "Telerik.Web.UI" namespace.

    Differences between RadGrid "classic" and RadGrid for ASP.NET AJAX

    We have done our best to leave Classic --> RadGrid for ASP.NET AJAX migration as easy as possible. However, there are still several changes you may need to perform. Find the list below:

    1) Telerik.Web.UI Namespace

    RadGrid for ASP.NET AJAX Server-Side API is fully compatible with the Classic RadGrid!
    However, since all Telerik controls for ASP.NET AJAX are embedded in a single assembly, you need to use the same Register directive for the assembly in your RadGrid application: 

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    You need to change the namespace in the code-behind as well:

    using Telerik.Web.UI;

    Imports Telerik.Web.UI

    2) RadGrid AJAX built-in support is removed

    This is done in order to avoid any conflicts with the ASP.NET AJAX, which the UI controls for ASP.NET AJAX are based on.

    Properties like EnableAJAX, EnableAJAXLoadingTemplate and LoadingTemplateTransparency as well as the AJAXLoadingTemplate Grid sub-tag no longer exist and will throw errors on compiling. The AJAX functionality was actually taken from RadAjax and everything should be achieved with RadAjax controls now: RadAjaxManager, RadAjaxPanel and RadAjaxLoadingPanel (refer to RadAjax section).

    Find below a sample RadAjaxManager and RadAjaxLoadingPanel markup which ajaxifies "RadGrid1" displaying loading panel with transparency while updating:

    Ajaxified RadGrid

    <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" Width="75px" Transparency="25">
 <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
</telerik:RadAjaxLoadingPanel>

    All calls of AjaxRequest method should be performed by the RadAjax controls (see the RadAjax section of the documentation for more details).

    The OnRequestStart/OnRequestEnd RadGrid client events can be replaced with RadAjax controls OnRequestStart/OnResponseEnd.

    RadGrid's ResponseScripts collection is also removed. Use RadAjax controls ResponseScripts instead.

    3) Access RadGrid client-side object

    The following script should be replaced with $find() ASP.NET AJAX function (shortcut for the findComponent() function:

    Access client-side Grid object of Classic RadGrid

    var grid = window["<%=RadGrid1.ClientID %>"];

    Access client-side Grid object of RadGrid for ASP.NET AJAX**

    var grid = $find("<%=RadGrid1.ClientID %>");

    However, keep in mind that any server-side code block like the above should be wrapped inside RadCodeBlock, otherwise an error will be thrown.

    Access client-side object in RadCodeBlock**

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    function MyFunction(){
        var grid = $find("<%=RadGrid1.ClientID %>");
        //more code..
    }
</script>
</telerik:RadCodeBlock>

    4) DataNavigateUrlField of GridHyperLinkColumn

    The property is obsolete for a long time and is now removed. Instead, one can use DataNavigateUrlFields property.

    5) ClientSettings -> EnableClientKeyValues property

    The old ClientSettings -> EnableClientKeyValues property is replaced by ClientDataKeyNames for MasterTableView/GridTableView. Hence when you set fields for client serialization through the ClientDataKeyNames property of grid table the client key values will be automatically available client-side.

    6) ClientSettings -> ActiveRowData property

    The old ClientSettings -> ActiveRowData server property of the control is replaced by ActiveRowIndex property which serves the same purpose as the previous one.

    7) ClientSettings -> ApplyStylesOnClient removed

    This property is removed from the Prometheus version of RadGrid. The styles applied to the grid elements client and server-side are now automatically synchronized and the presence of this property is not needed.

    8) Client-side API changes

    Classes/Namespaces changes

    RadGrid Classic classes/namespaces RadGrid for ASP.NET AJAX classes/namespaces
    RadGridNamespace Telerik.Web.UI
    RadGridNamespace.RadGrid Telerik.Web.UI.RadGrid
    RadGridNamespace.RadGridTable Telerik.Web.UI.GridTableView
    RadGridNamespace.RadGridTableColumn Telerik.Web.UI.GridColumn
    RadGridNamespace.RadGridTableRow Telerik.Web.UI.GridDataItem
    RadGridNamespace.ClientEvents Telerik.Web.UI.ClientEvents

    Client properties changes:

    RadGrid Classic client properties RadGrid for ASP.NET AJAX client properties
    All properties start with capital letter.

    Example:

    window["<%=RadGrid1.ClientID%>"].MasterTableView    		 All properties start with get_ followed by the previous name of the property (starting with small letter instead of capital letter). The syntax for client properties follows the ASP.NET AJAX naming conventions (open and closed brackets)

    Example:

    $find("<%=RadGrid1.ClientID%>").get_masterTableView()

    Client methods changes:

    RadGrid Classic client methods RadGrid for ASP.NET AJAX client methods
    All methods start with capital letter.

    Example:

    var grid = window["<%=RadGrid1.ClientID%>"];
    grid.MasterTableView.resizeColumn(columnIndex, width)    		 All methods should start with small letter instead of capital letter.
    The syntax for client methods follows the ASP.NET AJAX naming conventions.

    Example:

    var grid = $find("<%=RadGrid1.ClientID%>");
    grid.get_masterTableView().resizeColumn(
    columnIndex, width);

    Client events changes:

    RadGrid Classic client events RadGrid for ASP.NET AJAX client events
    Different signature depending on the event purpose.

    To cancel an event (which can be cancelled) you should invoke return false;

    Example:

    function ColumnResizing(index){

    alert("Attempt to resize column with index " + index + ". Action cancelled");

    return false;

    }    		 Unified signature with sender/eventArgs arguments passed in the handler:

    - the sender argument points to the grid client instance;

    - the eventArgs argument is a holder for the old arguments passed in the respective handler.

    To cancel an event (which can be cancelled) you should invoke args.set_cancel(true);

    Example:

    function ColumnResizing(sender, args){

    alert("Attempt to resize column with index " + args.get_gridColumn().get_element().cellIndex + ". Action cancelled");

    args.set_cancel(true);

    }

    New properties/methods have been implemented for RadGrid for ASP.NET AJAX. Review the Client-Side Programming chapter from the documentation for further details.

    9) Skins migration

    The HTML rendering and CSS skins of RadGrid for ASP.NET AJAX (code name "Prometheus") are pretty much the same as of RadGrid for ASP.NET Classic. However, there are several differences worth mentioning.

    New CSS classes in RadGrid for ASP.NET AJAX

    • DetailTable_Skin - applied to detail tables in hierarchy mode
    • PagerLeft_Skin, PagerRight_Skin, PagerCenter_Skin - applied to the different components of the pager
    • sliderPagerLabel_Skin - applied when using RadSlider as a pager
    • GridGroupFooter_Vista - applied to a group footer row
    • RadGrid is now capable of using CSS sprites for all its image buttons and skin images. Please refer to the RadGrid CSS sprites help topic for further information. If you are migrating a "classic" RadGrid skin to "Prometheus", you are not required to create a CSS sprite, but you need to set the ImagesPath property instead, in order to specify the location of all RadGrid skin images and image buttons.

    Removed CSS classes from RadGrid for ASP.NET AJAX

    • All CSS classes related to RadGrid's native filtering menu (now replaced by RadMenu): *GridFilterMenu_Skin, GridFilterMenuSelectColumn_Skin, GridFilterMenuTextColumn_Default, GridFilterMenuHover_Default *

    • GridLoadingTemplate_Skin - RadGrid Prometheus has no native Ajax functionality any more, hence it has no native LoadingTemplate (loading panel). RadAjaxManager/RadAjaxPanel for ASP.NET AJAX along with RadAjaxLoadingPanel should be used instead.

In this article
Related articles
Not finding the help you need? Improve this article