Hi,
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
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
0
Hello ,
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
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.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 24 Nov 2014, 03:04 PM
Thank you, I was able to replicate using RadAjaxPanels and ajaxRequest. I have some server side functionality(getting data from the database, to display on the charts). How can I achieve this functionality on server side.
0
Hi ,
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
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.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 25 Nov 2014, 02:44 PM
Thank you, I got it. I was successfully able to update each individual panels based on user selections.
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.
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.
0
Hi ,
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:
and perform the ajaxRequest through the RadAjaxManager with specific parameter.
Regards,
Maria Ilieva
Telerik
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.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 03 Dec 2014, 05:13 PM
Hi Maria,
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
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
0
Hi ,
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
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.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 08 Dec 2014, 10:18 PM
I have tried many variations. I am posting one of it. Please suggest me where I am going wrong. I had removed code for loading graph data. And I am using 2 hidden fields, to pass the selections as arguments to the RadAjaxManager.
(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>
(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>
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 08 Dec 2014, 10:20 PM
Ops, and the code for (Default.aspx.cs file)
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
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
0
Accepted
Hello ,
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
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.