New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Ajaxified Control in ItemTemplate Does a Full Postback

As of Q1 SP2, RadComboBox exposes a new client-side method - attachDropDown.

It should be used in the following scenario:

  • Ajaxified RadComboBox with ItemTemplate

  • A control in the ItemTemplate performs postback

Expected result: postback transformed to ajax request

Problem: full postback is performed in this situation.

The following example shows how to use the attachDropDown method to overcome the described problem.

ASPNET

<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server">
<ItemTemplate>
<div id="div1" onclick="StopPropagation(event)">
 <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1"
	TitleFormat="MMMM yyyy"
	Skin="Vista"
	style="margin: 0 auto;"
	ShowRowHeaders="false"
	AutoPostBack="true"
	ClientEvents-OnDateClick="OnDateClick"  
	ClientEvents-OnDateSelecting="OnDateSelecting"
	EnableMultiSelect="false"
	OnSelectionChanged="RadCalendar1_SelectionChanged"  >
 </telerik:RadCalendar>
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem runat="server"></telerik:RadComboBoxItem>
</Items>
</telerik:RadComboBox>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
   <AjaxSettings>
	   <telerik:AjaxSetting AjaxControlID="RadComboBox1">
		   <UpdatedControls>
			   <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
		   </UpdatedControls>
	   </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager> 
JavaScript
	
function OnDateClick(sender, args) 
 {
	args.get_domEvent().stopPropagation();
 }
function OnDateSelecting(sender, args)
 {
	if (args.get_isSelecting()) 
	{
		var combo = $find("<%= RadComboBox1.ClientID %>");
		combo.attachDropDown();
	}
	args.set_cancel(!args.get_isSelecting());
}

function StopPropagation(e) 
{
	e.cancelBubble = true;
	if (e.stopPropagation)
	 {
		e.stopPropagation();
	 } 
}
	

Basically, you need to subscribe to the client-side event fired from the control in the ItemTemplate (RadCalendar) which occurs before the postback. In this case this is ClientEvents-OnDateSelecting, but it could be OnClientNodeClicking if we were using the RadTreeView instead of RadCalendar.

Not finding the help you need?
Contact Support