Telerik Ajax Post I: Telerik Ajax Concepts

After working with ASP.Net Ajax and Telerik RadAjax, I think RadAjax is a good tool for rapid ASP.Net programming. If you need to get things done quickly with decent UI, you should consider RadAjax and Telerik web controls.

Telerik’s RadAjax framework allows you to take a regular ASP.Net application and AJAX-enable it with no coding or changes to your page life cycle. No client side javascript, no server side coding – just drop a component on your form and configure it with the smart tag editor and you are good to go! The framework automatically replaces Postbacks with AJAX callbacks. It preservers changes to viewstate, preserves the normal page life cycle, persists form values, reruns client side javascript as needed, and supports standard client side validation. In other words, it works well out of the box with most ASP.Net 1.1 or 2.0 applications, and many third party components

Although “no coding” seems to be a good slogan, you still need to understand some basic Ajax concept and how Telerik works to get your job done if you’re programming daily.

You can use RadAjaxPanel and/or RadAjaxManager to build Ajax enabled page. RadAjaxPanel is quicker to get things done if the requirement is not complicated. RadAjaxManager is a little bit complicated, however it has lower level APIs which you can leverage.

Understanding RadAjaxPanel

Let’s imaging we put the AP.Net calendar control on the form and label on the bottom of the form. When we click the date, the label will be changed and you will see the page flickers due to the page refresh.

Here is the content in the aspx page

<form id=”form1″ runat=”server”>

<div>

<radA:RadAjaxPanel ID=”RadAjaxPanel1″ runat=”server” Height=”200px” Width=”300px”>

<asp:Calendar id=”Calendar1″ runat=”server” __designer:wfdid=”w1″

OnSelectionChanged=”Calendar1_SelectionChanged”>

</asp:Calendar>

<BR />

<asp:Label id=”lblDateSelected” runat=”server”

__designer:wfdid=”w2″ Width=”258px”></asp:Label>

</radA:RadAjaxPanel>

</div>

</form>

After surrounding the calendar and label control, you won’t see the screen refresh. It sounds simple however it has a major flaw, everything that is inside the panel is re-rendered for every AJAX callback, whether it changed or not.

Understanding RadAjaxManager

When the page is complicated with some complicated controls such as GridView or TreeView, the performance of RadAjaxPanel. In this case, a better approach is to choose RadAjaxManager which could be used more precisely control the initiator ( trigger ) controls and target controls.

The Initiator is the control that causes a Postback that you wish to convert to an AJAX callback, for

instance a Button, or some control that has it’s AutoPostback property set.

The Targets are the controls that are to be re-rendered after the callback (presumably because the

callback changes them). The target can be a list of individual controls, or containers, like ASP Panels,

RadAjaxManager maintains a list of AjaxSetting with one control as an Initiator, and one or more controls as Targets. A requirement for this to work is that the controls that are specified in the AjaxSettings are rendered with an ID attribute in the client side HTML. As you know, when you set the visibility of asp.net to false, then there is no HTML content will be rendered, which could cause Javascript error when using RadAjaxManager because it expects an ID. To resolve this issue, you can use a DIV element to surround your ASP.net controls.

<div id=”divEnd” runat=server>

<radCln:RadDatePicker ID=”dpEnd” runat=”server” Width=”100px”>

<DateInput Title=”" PromptChar=” ” TitleIconImageUrl=”"

DisplayPromptChar=”_” CatalogIconImageUrl=”"

TitleUrl=”" Description=”"></DateInput>

</radCln:RadDatePicker>

</div>

You can only have one RadAjaxManager per page. You can not mix RadAjaxManagers and RadAjaxPanels in the same page according to the current version of Telerik Ajax.

Rewirte the above example using RadAjaxManager:

<radA:RadAjaxManager ID=”RadAjaxManager1″ runat=”server”>

<AjaxSettings>

<!– AjaxControlID: Initiator –>

<radA:AjaxSetting
AjaxControlID=”ddlDateRange”>

<UpdatedControls>

<!– one or more target controls –>

<radA:AjaxUpdatedControl ControlID=”dpStart”

LoadingPanelID=”AjaxLoadingPanel1″ />

<radA:AjaxUpdatedControl ControlID=”divEnd”

LoadingPanelID=”AjaxLoadingPanel1″ />

</UpdatedControls>

</radA:AjaxSetting>

</AjaxSettings>

</radA:RadAjaxManager>

Initiator in the User Control

There are some limitations in the RadAjaxManager. For instance you can’t add it into the Web User Control because the RadAjaxManager needs to go on the page that hosts this control. In order to get RajAjaxManager to work with user control, you need to create a method to allow the host page to inject the RajAjaxManager into the user control. For instance:

public void ConfigureAjax( RadAjaxManager ajm )

{

ajm.AjaxSettings.AddAjaxSetting( ddlDateRange, dpStart, AjaxLoadingPanel1 );

ajm.AjaxSettings.AddAjaxSetting( ddlDateRange, divEnd, AjaxLoadingPanel1 );

}

Using RadAjaxManager in Master Page

If you want to use the RadAjaxManager in a Master Page context, it is most likely that you will have the RadAjaxManager in the Master Page, and the Ajax Initiators and Targets could be in any combination of the Master Page or the Content Forms. Either way, you will need to set up your AjaxSettings programmatically, as the RadAjaxManager Property Builder will not be able to see into the Content Pages.

Sample code in the content page

protected void pbContent_Click(object sender, EventArgs e)

{

Label lbl = (Label)this.Master.FindControl(“lblMaster”);

lbl.Text = “Changed from Content ” + DateTime.Now.ToString();

}

Sample code in the master page

protected void pbMaster_Click(object sender, EventArgs e)

{

Label lbl = (Label) this.cphMain.FindControl(“lblContent”);

lbl.Text = “Changed from Master ” + DateTime.Now.ToString();

}

So where we should hook up Ajax? The answer is anywhere. The Ajaxsetting could be set in the master page, content page or both. You need to determine where to put it to get page functional and maintainable in your project although you’re most likely will put the code in the content page.

protected void Page_Load(object sender, EventArgs e)

{

RadAjaxManager ajm = (RadAjaxManager)this.Master.FindControl(“ajmMaster”);

Button btn = (Button)this.Master.FindControl(“pbMaster”);

ajm.AjaxSettings.AddAjaxSetting(btn, this.lblContent);

Label lbl = (Label)this.Master.FindControl(“lblMaster”);

ajm.AjaxSettings.AddAjaxSetting(pbContent, lbl);

}

Advertisement