Configuration panel

[Kishor Dalwadi]

Hi, 

   we have a requirement of using Configuration Panel in our  project. Can you please give me the source code for configuration panel which we can use in our Csharp Project.


Thanking you

[Dimo]

Hello Kishor,

The ConfiguratorPanel is a custom server control, which inherits from asp:Panel and adds a couple of elements with predefined CSS classes. On the client side, the control has a Javascript function, which slides the container to open and close with jQuery.

I see that you have downloaded a full trial of RadControls, which contains the Demos website. The code for the control is in this website in the following files:

1. server-side code
~/App_Code/QuickStart/ConfiguratorPanel.cs

2. client-side code
~/Common/qsf.js
-> look for the slideConfig() function

3. CSS styles
~/Common/styles09/qsf.css
 -> look for the styles between the /*configurator*/ and /*footer*/ comments

4. images
~/Common/styles09/
-> the image names can be seen in the CSS rules from point (3)


Don't forget to include jQuery to the page.


Kind regards,
Dimo
the Telerik team

[Kishor Dalwadi]

Thanks You Sir.

it's working fine and expexted.

Kishor Dalwadi.

[Luis]

Hi Dimo,

Im having problems when i use it inside a WebUserControl at jscript function:

 

slideConfig(uniqudId, dir) at $telerik.$("#" + uniqudId + " .cfgHead")[0] its null.

Cna you plz post an example with a little solution.

Best Regards,
Luis

 

[Kishor Dalwadi]

Hi Louis

I am getting same problem like you.

Then i was change ConfiguratorPanel class. That creates unique id as per usercontrol.

Please replace below function only then it's work fine.

-----------------------------------------------
    protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(string.Format(
                @"<div class=""qsfConfig{4}"">
                <a class=""cfgHead qsfClear"" href=""javascript:slideConfig('{0}', '{1}');"" onfocus=""blur()"">
                    <span class=""cfgTitle"">{2}</span>
                    <span class=""cfgButton cfg{1}""></span>
                </a>
                <div class=""cfgContent qsfClear"" style=""{3}"">",
                this.ClientID,
                Expanded ? "Up" : "Down",
                Title,
                Expanded ? "" : "display:none",
                Orientation == ConfiguratorPanelOrientation.Vertical ? " cfgVertical" : "")
            );

            base.RenderContents(writer);

            writer.Write(string.Format(@"<input type=""hidden"" name=""{0}"" value=""{1}"" /></div></div>",
                this.ClientID,
                Expanded)
                );
        }

------------------------------------------------

Thank You.

[Ronnie]

I'm hoping I get some help here.  I too am looking to implement this configuration panel.  I keep getting the following error and it does not seem like it' finding the stylesheet.  Any help would be greatly appreciated.

slideConfig('ctl00$CP_MainContent$ConfigurationPanel2', 'Up');

[BSL Support]

hi can i get a VB version of the configurator panel. i tried converting it but it was leading into some postback problems.
Thank you in advance.

[Dimo]

Hello,

@Support

The configurator panel's server code is quite simple. If an automatic conversion tool cannot produce the correct code, have you tried debugging and correcting the VB code manually? In addition, this control inherits from an ordinary Panel and is not supposed to persist any state (except the expanded one), neither it is a naming container. Are you sure the problem is related to this control at all?

@Ronnie

You are using a UniqueID in the slideConmfig Javasctript method, while you should be using a ClientID.

Here is a similar example:

http://api.jquery.com/slideToggle/

Regards,
Dimo
the Telerik team

[Ronnie]

That worked!  Thank you...

[Tim]

I pulled the code from the sample and have it working 100%. The problem is that I am getting a javascript error (Object doesn't support this property or method) in the slideConfig function if I try to remove the RadComboBox. I have successfully removed every other control but the RadComboBox from the Configuration  Panel and it works properly. I have even tried to substitute the RadComboBox control with another control thinking that there needs to be at least one control in the panel but I get the same error. I would assume that the Configuration Panel is not dependent on a RadComboBox is it?

I am running a MasterPage/ContentPage the below code resides in the ContentPage

This code fails;

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configuration" Orientation="Vertical" Expanded="true">
             <asp:textbox runat="server" ID="TextBox1" AutoPostBack="true">Help Me!</asp:textbox>
        </qsf:ConfiguratorPanel>
    </telerik:RadAjaxPanel>

This code works;

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configuration" Orientation="Vertical" Expanded="true">
            <telerik:RadComboBox runat="server" ID="RadComboBox1" AutoPostBack="true" Width="70px" Visible="true">
            </telerik:RadComboBox>
        </qsf:ConfiguratorPanel>
    </telerik:RadAjaxPanel>

Thoughts?

Thanks
Tim

--Update---
Using Q1 2011 SP1 version

[Helen]

Hi Tim,

You have to register the qsf.js file in you .aspx page.
Please find attached a sample project for your reference.

Regards,
Helen
the Telerik team

[Tim]

Thanks Helen. I had a reference to the .js in the master page. I'll take a look at the project you attached, it must have been something else I overlooked.

[ramkumar]

Hi Telerik,

When I try to use the  ConfiguratorPanel  ..     I could not see the top line image (dot image and right side image)
(refere doc attached)
Please let me know which style steet you are using for this.

[Helen]

Hi Ramkumar,

Please search for '.cfgHead' , 'cfgButton cfgDown' and 'cfgButton cfgUp' css classes.

Kind regards,
Helen
the Telerik team

[javx]

I am new to telerik, am trying to use some sample code that uses ConfigurationPanel but I get this error: ConfigurationPanel is not a know element.

I found an old issue that points to certain code files that need to be downloaded but I can't find how to do this or where the files are located. the response indicated the following text but I have no clue on how to find the files or how to add them to my project - thanks in advance:

The ConfiguratorPanel is a custom server control, which inherits from asp:Panel and adds a couple of elements with predefined CSS classes. On the client side, the control has a Javascript function, which slides the container to open and close with jQuery.

I see that you have downloaded a full trial of RadControls, which contains the Demos website. The code for the control is in this website in the following files:

1. server-side code
~/App_Code/QuickStart/ConfiguratorPanel.cs

2. client-side code
~/Common/qsf.js
-> look for the slideConfig() function

3. CSS styles
~/Common/styles09/qsf.css
 -> look for the styles between the /*configurator*/ and /*footer*/ comments

4. images
~/Common/styles09/
-> the image names can be seen in the CSS rules from point (3)


Don't forget to include jQuery to the page.

[Helen]

Hi,

When you download a trial you will get these files.


Best wishes,
Helen
the Telerik team

[Mohammed]

Dear,

I'm trying to use the configuration panel, I have done tho following steps:

Include the qsf.js file 
Include the qsf.css file 
Include the images file 
Register the gsf.js file on my webpage as follow:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Script/qsf.js" type="text/javascript"></script>
    <link href="Script/qsf.css" rel="stylesheet" type="text/css" />
    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
         <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true" 
        CssClass="title"></qsf:ConfiguratorPanel>
         </form>
</body>
</html>

But when I click the configrationpanel, a java scrip error is raised "Error: $telerik is not defined"
 
Can you please help in this.


Regards,

[mathieu cupryk]

This javascript error is happenning because of jquery. Put jquery after qsf