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

Update panels individually based on dropdown selection

10 Answers 295 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
madhavi
Top achievements
Rank 1
madhavi asked on 14 Nov 2014, 07:49 PM
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

10 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
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.

 
0
madhavi
Top achievements
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
Maria Ilieva
Telerik team
answered on 25 Nov 2014, 09:10 AM
Hi Madhavi,

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
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.
0
Maria Ilieva
Telerik team
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.

 
0
madhavi
Top achievements
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
0
Maria Ilieva
Telerik team
answered on 08 Dec 2014, 11:19 AM
Hi 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.

 
0
madhavi
Top achievements
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>

0
madhavi
Top achievements
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     



0
Accepted
Maria Ilieva
Telerik team
answered on 11 Dec 2014, 01:21 PM
Hello Madhavi,

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.

 
Tags
Ajax
Asked by
madhavi
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
madhavi
Top achievements
Rank 1
Share this question
or