RadSkinManager.ApplySkin doesn't work for reapplying

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

    Posted 25 Nov 2014 Link to this post

    I am having 4 RadAjaxPanels with radhtmlchart controls. And I want to update/control individually each paneI with different skins.
    I have two drop down list boxes for Panel No and Color and when user clicks 'Update' button, I am calling function to invoke ajaxRequestwithTarget, with arguments(panel no and color selected).
    and on the server side I am having the following logic
     protected void RadAjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            string argument = (e.Argument);
            String[] argArray = argument.Split(",".ToCharArray());
            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;
            }

    The logic works fine the first time, able to apply different skins to all the four panels..But it doens't work when I want to reapply another skin on them.  Can we apply Skin only once to the controls. I am unable to understand what would be the reason. 

    Thank you,
    Madhavi






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

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

    Hi , 

         I am attaching my code for  better understanding of my problem.  I was able to apply different skins to all the panels first time. But it doesn't work second time. The label in the panels gets updated thought. I appreciate your thoughts and inputs,  where I am doing wrong.

    (This is Default.aspx)
    <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="HiddenPanelNo" runat="server" />
        <asp:HiddenField ID="HiddenSkinType" runat="server" />

        
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Default" ></telerik:RadSkinManager>
          <telerik:RadCodeBlock runat="server" ID="codeBlock">
            <script type="text/javascript">

                function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
                var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
                hiddenField.value = "";
                hiddenField.value = sender.get_selectedItem().get_value();    
                }

                function OnClientSelectedIndexChangeEvent(sender, eventArgs) {
                var hiddenField = document.getElementById("<%=HiddenSkinType.ClientID %>");
                hiddenField.value = "";
                hiddenField.value = sender.get_selectedItem().get_value();
                }

                function invokeAjaxrequest() {
                var hiddenField = document.getElementById("<%=HiddenPanelNo.ClientID %>");
                var hiddenField2 = document.getElementById("<%=HiddenSkinType.ClientID %>");
                var argumentslist = hiddenField.value + "," + hiddenField2.value;
                switch (hiddenField.value) {
                case "1":
                 $find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", argumentslist);
                  break;
             case "2":
                  $find("<%= RadAjaxPanel2.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel2.UniqueID %>", argumentslist);
                   break;
             case "3":
                 $find("<%= RadAjaxPanel3.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel3.UniqueID %>", argumentslist);
                  break;
             case "4":
                $find("<%= RadAjaxPanel4.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel4.UniqueID %>", argumentslist);
                 break;
             default:
               alert("Missing Information to display Chart");
                 break;
             }    
           }
       </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">
                <Items>
                    <telerik:RadComboBoxItem Text="Vista" Value="Vista" />
                    <telerik:RadComboBoxItem Text="WebBlue"  Value="WebBlue"/>
                    <telerik:RadComboBoxItem Text="Outlook"  Value="Outlook"/>
                    <telerik:RadComboBoxItem Text="Sunset" Value="Sunset" />
                    <telerik:RadComboBoxItem Text="Hay" Value="Hay" />
                    <telerik:RadComboBoxItem Text="Web20"  Value="Web20" />
                    <telerik:RadComboBoxItem Text="Black" Value="Black" />
                    <telerik:RadComboBoxItem Text="Forest"  Value="Forest" />
                    <telerik:RadComboBoxItem Text="Metro" Value="Metro" />
                    <telerik:RadComboBoxItem Text="BlackMetroTouch" Value="BlackMetroTouch" />
                    <telerik:RadComboBoxItem Text="Default" Value="Default" Selected="true" />
                </Items>
            </telerik:RadComboBox>

             <input type="button" value="Apply Changes" onclick="invokeAjaxrequest();" />
           
          </div>

     <div id="div1" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
          <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="Rad_AjaxRequest" style="float:left; height:inherit; width:inherit; border-radius:20px; border-color:Green; border-width:thick;" >
                        <asp:Label ID="lblChart1" runat="server" Text="" ForeColor="Black" 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>
          </telerik:RadAjaxPanel>
        </div>
        

         <div id="div2" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
                    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server"  OnAjaxRequest="Rad_AjaxRequest"  style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
                        <asp:Label ID="lblChart2" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
                        <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server"  Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
                        </telerik:RadHtmlChart>
                    </telerik:RadAjaxPanel>
    </div>
        
        <div id="div3" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;">
                    <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server"  OnAjaxRequest="Rad_AjaxRequest"  style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
                        <asp:Label ID="lblChart3" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
                        <telerik:RadHtmlChart ID="RadHtmlChart3" runat="server"  Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
                        </telerik:RadHtmlChart>
                    </telerik:RadAjaxPanel>             
    </div>

          <div id="div4" style="float:left; width:39.5%; height:260px;border-style:solid;border-color:Black;border-width:thick;" >
                    <telerik:RadAjaxPanel ID="RadAjaxPanel4" runat="server"  OnAjaxRequest="Rad_AjaxRequest" style="float:left;height:240px;width:39%; border-radius:20px; border-color:Green; border-width:thick;" >
                        <asp:Label ID="lblChart4" runat="server" Text="" ForeColor="Black" Font-Size="18" Font-Bold="true"></asp:Label>
                        <telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" Width="440px" Height="240px" BorderWidth="5px" BorderColor="Aqua">
                        </telerik:RadHtmlChart>
                    </telerik:RadAjaxPanel>
                    </div>
        </div>
       </form>
      </body>
    </html>

    (and in Default.aspx.cs file) , I am handling the ajaxRequest withe the following code.
        protected void Rad_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            string argument = (e.Argument);
            String[] argArray = argument.Split(",".ToCharArray());
            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;
            }
        }

    Thank you,
    Madhavi
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 10 Dec 2014 Link to this post

    Hello,

    I have updated your project to work as excepted. Please review the attached sample. The ViewState of the charts should be disabled or you should set the Skin later.

    Regards,
    Peter Filipov
    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.

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

    Posted 10 Dec 2014 in reply to Peter Filipov Link to this post

     It worked. Thanks a lot. I appreciate your help.
Back to Top