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. Info can be found at http://ajax.asp.net/docs/InstallingASPNETAJAX.aspx
- 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://ajax.asp.net/docs/ConfiguringASPNETAJAX.aspx (Look for the topic called "Adding ASP.NET AJAX
Configuration Elements to an Existing Web Site".)
- Add a ScriptManager control to the page (or user control) in which you want to add any RadControls 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://ajax.asp.net/docs/overview/ScriptManagerOverview.aspx.
- Drag and drop a control from the RadControls 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, 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 RadControls 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:
| Telerik.Web.UI namespace |
 Copy Code |
|
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
|
You need to change the namespace in the code-behind as well:
| C# |
Copy Code |
|
using Telerik.Web.UI;
|
| VB.NET |
Copy Code |
|
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 RadControls 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 LoadingPanel markup which ajaxifies "RadGrid1" displaying loading panel with transparency while updating:
| Ajaxified RadGrid |
Copy Code |
|
<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 |
Copy Code |
|
var grid = window["<%=RadGrid1.ClientID %>"];
|
| Access client-side Grid object of RadGrid for ASP.NET AJAX |
Copy Code |
|
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 |
Copy Code |
|
<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 API Reference 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).
AjaxManager/RadAjaxPanel for ASP.NET AJAX along with RadAjaxLoadingPanel should be used instead.