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

AUTHOR: Rumen Zhekov

DATE POSTED: September 14, 2018

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

1. Make sure you have installed ASP.NET AJAX.
2. 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.

3. 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.
4. 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" %>

5. Replace the classic RadGrid controls declarations:

   <rad:RadGrid ID="RadGrid1" runat="server" ...

   with the new RadGrid declarations:

   <telerik:RadGrid ID="RadGrid1" runat="server" ...

    

6. In the code-behind, replace any using (C#) or Imports (VB) statements for the "Telerik.WebControls" with the "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:

ASPX

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

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

C#

using Telerik.Web.UI;

VB.NET

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

 

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

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.