This is a migrated thread and some comments may be shown as answers.
ConfiguratorPanel
11 Answers 624 Views
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 29 Jan 2010, 01:33 AM
Does anyone know where to get or how to make the ConfiguratorPanel that is shown on many of the demo pages of the telerik controls? Is this a control that is available? Or something we can get? I need something EXACTLY like it! (A sliding/expanding panel?)

See "Configure Rotator Type":
http://demos.telerik.com/aspnet-ajax/rotator/examples/rotatortypes/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/rotator/examples/default/defaultcs.aspx

See "Configurator"
http://demos.telerik.com/aspnet-ajax/calendar/examples/functionality/mainareacustomization/defaultcs.aspx

Thanks,
~bg

11 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 2
Veteran
answered on 29 Jan 2010, 03:35 AM
Have a peek in your LiveDemos install directory, it all lives under ~/Common
<%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>


There's all the qsf stuff there.

However if all you need is just a simple slide up/down you could throw in a quick one node RadPanelBar, or use a single jQuery line on your div.

<script type="text/javascript> 
    $telerik.$('#yourDivID').slideToggle(); 
</script> 
(make sure to enable the jQuery though if you don't have a control that uses it)
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" > 
    <Scripts> 
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
    </Scripts> 
</telerik:RadScriptManager> 


I think one of the telerik admins here at one point said that demos page uses some older controls...there's certainly a ton of stuff in that qsf package which you dont need for a simple slide up/down

If you go the jQuery route you should try and avoid padding on the slide element (in favour of margins)...it seems to "pop" using padding.  
0
Bill
Top achievements
Rank 1
answered on 29 Jan 2010, 10:51 AM
Hey, thanks Steve for the reply  and information!
I'm using the very latest Rad controls and I guess they dont include that anymore? I could not find it in my local demo directories.
Anyway, after what you mentioned, sounds like I sould go with the jQuery stuff, but that unfortunately is new to me.
I tried your example, but there must be more to it than that. Mine didnt work.
Thanks
0
Sebastian
Telerik team
answered on 29 Jan 2010, 11:14 AM
Hello Bill,

The ConfiguratorPanel is designed to be used in the RadControls QSF only and it is not a real server control that can be skinned or updated with ajax. You may consider using our RadPanelBar control with a single root item and templated nested item(s) along with expand animation to achive the same result:

http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/expandanimation/defaultcs.aspx

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Daniel Aquere
Top achievements
Rank 2
answered on 19 Apr 2011, 06:06 PM
Hi everyone,

Your component "configuratorpanel" seems to be what I need for my applicatives. I'd really like to use it on a tool I'm actualy developing.

Yet, I did not figure out how to isolate it from the examples.

Can you provide me some help, in order to get this issue solved?

I appreciate your help in advance

Regards

Daniel
0
Daniel Aquere
Top achievements
Rank 2
answered on 09 May 2011, 02:25 PM
Hi everyone,

Please, some light over this issue. 

I´m trying to use RadPanelBar, but what I really need is a simple line to open the panel.

Thanks, best

Daniel
0
Bill
Top achievements
Rank 1
answered on 09 May 2011, 08:42 PM
This should work for you. I could not attach the actual code file but I did attach the images I use (I created). Put the image files in your image directory and modify the style to the path of the 2 images.
Everything is in the one aspx page. Just create you a new web form and use this code.
Let me know if this helps you.
~bg
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Example.aspx.vb" Inherits="Example" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
 <style type="text/css">
          
        #panel {
              
            height: 100px;
            display: none;
        }
  
        .btn-slide {
            background: url(./images/btnDN.gif) no-repeat;
            width: 18px;
            height: 18px;
            display: block;
              
        }
        .active {
            background: url(./images/btnUP.gif) no-repeat;
        }
         
    </style>
      
</head>
<body  style="font-family: sans-serif, Arial, Helvetica">
    <form id="form1" runat="server">
  
   <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
    <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        </Scripts>
    </telerik:RadScriptManager>
  
    <script type="text/javascript">
  
  
        (function ($) {
            $(document).ready(function () {
  
                $(".btn-slide").click(function () {
                    $("#panel").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
                });
            });
        })($telerik.$);
    </script>
  
     <table cellpadding="0" cellspacing="3" >
                                <tr>
                                    <td>
                                    Click the button for more advanced features (You can put the button anywhere) > 
                                        </td>
                                    <td>
                                         <a href="#" class="btn-slide" title="Advanced Search"></a>
                                    </td>
                                </tr>
                            </table>
  
                            <br />
                            <br />
  
   <div id="panel" >
                 <asp:Label ID="Label4" runat="server" Text="Advanced Information: " 
                     ForeColor="#006600"></asp:Label>
                                       <br />
                            <table cellpadding="0" cellspacing="3" width="100%" 
                     style="color: #006600;">
                                <tr >
                                    <td style="border-width: 1px; border-color: #C0C0C0; border-top-style: dashed; border-bottom-style: dashed; padding-top: 10px; padding-bottom: 15px;">
                                        <asp:Literal ID="Literal6" runat="server" Text="Any controls here:"></asp:Literal>
                                        <br />
                                        <asp:TextBox ID="txt1" runat="server" Width="98%"></asp:TextBox>
                                    </td>
                                    <td style="border-width: 1px; border-color: #C0C0C0; border-top-style: dashed; border-bottom-style: dashed; padding-top: 10px; padding-bottom: 15px;">
                                        <asp:Literal ID="Literal7" runat="server" Text="More controls here:"></asp:Literal>
                                        <br />
                                        <asp:TextBox ID="txt2" runat="server" Width="98%"></asp:TextBox>
                                    </td>
                                    <td style="border-width: 1px; border-color: #C0C0C0; border-top-style: dashed; border-bottom-style: dashed; padding-top: 10px; padding-bottom: 15px;">
                                        <asp:Literal ID="Literal8" runat="server" Text="Whatever controls here:"></asp:Literal>
                                        <br />
                                        <asp:TextBox ID="txt3" runat="server" Width="98%"></asp:TextBox>
                                    </td>
                                </tr>
                            </table>
                             
                </div>
            <hr />
    </form>
</body>
</html>
0
Daniel Aquere
Top achievements
Rank 2
answered on 09 May 2011, 09:27 PM
Hi Bill,

Bingo!!!!!!

Wonderful, congrats. Thank you very much. 
It´s the exactly what I needed.

Now, I ´m working to show the image buttons, for some reason then don´t appears. (I changed the path of files)

Best, abraço

Daniel
0
Bill
Top achievements
Rank 1
answered on 09 May 2011, 09:55 PM
check in the style....
try "/Images"
or "../Images"
etc.
Play with the "dots" before your path.
~bg
0
Daniel Aquere
Top achievements
Rank 2
answered on 09 May 2011, 10:09 PM
Hey Bill,

When the file is uploading in Telerik site, the name changes... hahaha, this was the problem.

Sorry for my stupid mistake.

Hug (abraço in portuguese)

Daniel
0
Grill
Top achievements
Rank 1
answered on 27 Dec 2012, 03:17 PM
Hello Bill,

thank you for your solution, it's great.
But i have a problem with 2 RadComboBoxes (for item transfer), the first box with the buttons is not shown correct (see attachments).
Maybe the Telerik support or you can hel me.

Thanks.
0
Maria Ilieva
Telerik team
answered on 02 Jan 2013, 07:55 AM
Hi Grill,

Could I kindly ask you to open a separate ticket for the described RadComboBox issue? Thus we will be able to easily track the problem and concentrate on the provided resources to isolate the issue on our site.

Kind regards,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Bill
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 2
Veteran
Bill
Top achievements
Rank 1
Sebastian
Telerik team
Daniel Aquere
Top achievements
Rank 2
Grill
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or