Update panels individually based on dropdown selection

11 posts, 0 answers
  1. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 14 Nov 2014 Link to this post

    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
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 19 Nov 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 24 Nov 2014 in reply to Maria Ilieva Link to this post

    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. 
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Nov 2014 Link to this post

    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.

     
  6. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 25 Nov 2014 in reply to Maria Ilieva Link to this post

    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.
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 28 Nov 2014 Link to this post

    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.

     
  8. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 03 Dec 2014 in reply to Maria Ilieva Link to this post

    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
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 08 Dec 2014 Link to this post

    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.

     
  10. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 08 Dec 2014 in reply to Maria Ilieva Link to this post

    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>

  11. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 08 Dec 2014 in reply to madhavi Link to this post

    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     



  12. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 11 Dec 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017