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

ConfiguratorPanel

11 Answers 1146 Views

General Discussions

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

11 Answers, 1 is accepted

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.

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.

answered on 09 May 2011, 08:42 PM

btnDN.gif

btnUP.gif

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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>

answered on 27 Dec 2012, 03:17 PM

RadComoBox-with-open-slider-wrong.png

RadComoBox-with-deactivated-slider-correct.png

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

ConfiguratorPanel

11 Answers, 1 is accepted