Telerik UI for ASP.NET AJAX

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. If your web application is not using ASP.NET AJAX you need to configure it to do so. Detailed instructions can be found at http://msdn.microsoft.com/en-us/library/ff647506.aspx

  3. Add a ScriptManager 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 you can add the ScriptManager control in your master page. For further details about the ScriptManager control, see

    http://msdn.microsoft.com/en-us/library/bb398863.aspx.

  4. 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.

  5. 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" %>

     

  6. Replace the classic RadGrid controls declarations:

     

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

     

    with the new RadGrid declarations:

     

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

     

  7. 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

Note

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:

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

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

CopyC#
using Telerik.Web.UI;
CopyVB.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:

CopyAjaxified 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):

CopyAccess client-side Grid object of Classic RadGrid
var grid = window["<%=RadGrid1.ClientID %>"];
CopyAccess 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.

CopyAccess 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:

window["<%=RadGrid1.ClientID%>"].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:

$find("<%=RadGrid1.ClientID%>").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

    Detail table

  • PagerLeft_Skin, PagerRight_Skin, PagerCenter_Skin - applied to the different components of the pager

    Pager elements

  • sliderPagerLabel_Skin - applied when using RadSlider as a pager

    Pager slider

  • GridGroupFooter_Vista - applied to a group footer row

    group footer

  • 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.