This is a migrated thread and some comments may be shown as answers.

Update panels individually based on dropdown selection

10 Answers 365 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 19 Nov 2014, 09:55 AM

Hello Madhavi,

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.

answered on 28 Nov 2014, 08:12 AM

Hi Madhavi,

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.

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>

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

Accepted