I am having 5 panels on my screen.
On 4 panels, I have RadHtmlChart graphs.
On 1 panel, I have drop down control, to select which panel I want to update and some other parameters for that panel to apply. When the user selects 'Apply', only that particular panel needs to be updated.
In asp.net, I know the way, using updatepanels with asynchronous and triggers. I am new to telerik. I am trying to replicate using RadAjaxManager. Any help on how to achieve this. I had them listed under RadAjaxManager in UpdatedControls list. But all of them are getting refreshed.
Thank you,
Madhavi
10 Answers, 1 is accepted
In order o achieve the required functionality you can handle the client click event of the "Apply" button and call manual ajaxRequest for each specific RadAjaxPanel based on the value in the DropDown.
For this purpose you should get the DropDown control on the client, check its value and based on it you can call ajaxRequest as described in the help topic below:
http://www.telerik.com/help/aspnet-ajax/ajax-ajaxpanel.html
I hope this helps.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

After performing the manual ajax request from the client you can simply hand;e the RadAjaxPanel server OnAjaxRequest event and update the needed controls there.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

I would like to know, can't we achieve this functionality using RadAjaxManager. Initially I was trying to do using RadAjaxManager, but was not successful. If we can, how can we do this logic using RadAjaxManager, if not, why we can't do it. Thank you in advance for your help and input.
The same approach could be achieved using RadAjaxManager. The easiest way for modifying the current RadAjaxPanel implementation is to replace each RadAjaxPanel with asp Panel (for example Panel1, Panel2, Panel3) and then add the corresponding Ajax settings like this:
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
RequestQueueSize
=
"10"
EnableAJAX
=
"true"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadAjaxManager1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"Panel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"Panel2"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"Panel3"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
<
ClientEvents
OnRequestStart
=
"RequestStart"
OnResponseEnd
=
"ResponseEnd"
/>
</
telerik:RadAjaxManager
>
and perform the ajaxRequest through the RadAjaxManager with specific parameter.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

I had tried a couple of ways with RadAjaxManager but no luck. When I keep AjaxControlID as "RadAjaxManager", OnRequestStart doesn't get fired when I click 'Submit' button.
If I change AjaxControlID to 'Submit' button, OnRequestStart does get fired up, but it calling OnRequestStart function recurrsively.
I appreciate for your time and ideas.
Thanks,
Madhavi
Can you please share your page markup as well as related code behind so that I can further revise your Ajax configuration and advise you for possible solutions?
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

(Default.aspx code)
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Default"></telerik:RadSkinManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
RequestQueueSize="10" OnAjaxRequest="Rad_AjaxRequest" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
<telerik:AjaxUpdatedControl ControlID="Panel2" />
<telerik:AjaxUpdatedControl ControlID="Panel3" />
<telerik:AjaxUpdatedControl ControlID="Panel4" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
<ClientEvents OnRequestStart="RequestStartfunction" />
</telerik:RadAjaxManager>
<telerik:RadCodeBlock runat="server" ID="codeBlock">
<script type="text/javascript">
function OnClientSelectedIndexChangeEvent(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenField2.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
var hiddenField = document.getElementById("<%=HiddenField1.ClientID %>");
hiddenField.value = "";
hiddenField.value = sender.get_selectedItem().get_value();
}
function RequestStartfunction(sender,eventArgs) {
alert("OnRequestStart");
var HiddenPanelNo = document.getElementById("<%=HiddenField1.ClientID %>");
var HiddenColorSkin = document.getElementById("<%=HiddenField2.ClientID %>");
var argumentslist = HiddenPanelNo.value + "," + HiddenColorSkin.value;
var ajaxManager = $find("<%=RadAjaxManager1.ClientID %>");
ajaxManager.ajaxRequest(argumentslist);
}
</script>
</telerik:RadCodeBlock>
<div>
<div>
<telerik:RadComboBox ID="radComBox" runat="server" EnableViewState="true" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedHandler">
</telerik:RadComboBox>
<telerik:RadComboBox ID="MySkinChooser" EnableViewState="true" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangeEvent">
</telerik:RadComboBox>
<asp:Button id="ApplyButton" Text="Apply Button" runat="server"/>
</div>
<div id="div1" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<asp:Panel ID="Panel1" runat="server" style="float:left; height:inherit; width:inherit; border-radius:20px; border-color:Green; border-width:thick;">
<asp:Label ID="lblChart1" runat="server" Text="" ForeColor="Yellow" Font-Size="18" Font-Bold="true" style="text-align:center;width:100px;height:20px;"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" BorderWidth="5px" Height="240px" Width="440px" BorderColor="Aqua" >
</telerik:RadHtmlChart>
</asp:Panel>
</div>
<div id="div2" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<asp:Panel ID="Panel2" runat="server" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart2" runat="server" Text="" ForeColor="Yellow" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</asp:Panel>
</div>
<div id="div3" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;">
<asp:Panel ID="Panel3" runat="server" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart3" runat="server" Text="" ForeColor="Yellow" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</asp:Panel>
</div>
<div id="div4" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
<asp:Panel ID="Panel4" runat="server" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
<asp:Label ID="lblChart4" runat="server" Text="" ForeColor="Yellow" Font-Size="18" Font-Bold="true"></asp:Label>
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
</telerik:RadHtmlChart>
</asp:Panel>
</div>
</div>
</form>
</body>
</html>

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Collections.Generic;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
loadComboBoxValues();
// RadHtmlChart1.DataSource = LoadHtmlChart1Data();
// RadHtmlChart1.DataBind();
// RadHtmlChart2.DataSource = LoadHtmlChart2Data();
// RadHtmlChart2.DataBind();
}
setComboBoxDefaultValues();
}
private void setComboBoxDefaultValues()
{
radComBox.DefaultItem.Text = "Please select value";
radComBox.DefaultItem.Value = "-1";
}
private void loadComboBoxValues()
{
radComBox.Items.Add(new RadComboBoxItem("1","1"));
radComBox.Items.Add(new RadComboBoxItem("2","2"));
radComBox.Items.Add(new RadComboBoxItem("3","3"));
radComBox.Items.Add(new RadComboBoxItem("4","4"));
MySkinChooser.Items.Add(new RadComboBoxItem("WebBlue","WebBlue"));
MySkinChooser.Items.Add(new RadComboBoxItem("Outlook","Outlook"));
MySkinChooser.Items.Add(new RadComboBoxItem("Sunset","Sunset"));
MySkinChooser.Items.Add(new RadComboBoxItem("Hay","Hay"));
MySkinChooser.Items.Add(new RadComboBoxItem("Web20","Web20"));
MySkinChooser.Items.Add(new RadComboBoxItem("Black","Black"));
MySkinChooser.Items.Add(new RadComboBoxItem("Forest","Forest"));
MySkinChooser.Items.Add(new RadComboBoxItem("Default","Default"));
}
protected void Rad_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string argument = (e.Argument);
String[] argArray = argument.Split(",".ToCharArray());
System.Drawing.Color argColor = System.Drawing.Color.FromName(argArray[1]);
switch (argArray[0])
{
case "1":
RadSkinManager1.ApplySkin(RadHtmlChart1, argArray[1]);
lblChart1.Text = argArray[1];
break;
case "2":
RadSkinManager1.ApplySkin(RadHtmlChart2, argArray[1]);
lblChart2.Text = argArray[1];
break;
case "3":
RadSkinManager1.ApplySkin(RadHtmlChart3, argArray[1]);
lblChart3.Text = argArray[1];
break;
case "4":
RadSkinManager1.ApplySkin(RadHtmlChart4, argArray[1]);
lblChart4.Text = argArray[1];
break;
default:
break;
}
}
}
Thanks for your help
I suppose that you need to perform manual request on some specific submit action. Note that in this case you should call the ajaxRequest() in some specific client event (for example Apply button OnClientClick) instead of the RadAjaxManager RequestStart event.
I hope this helps.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.