Configuration panel in UI for ASP.NET AJAX Ajax

Kishor Dalwadi

40 posts

Member since:
Nov 2009

Posted 27 Aug 2010 Link to this post

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

Admin

8457 posts

Posted 27 Aug 2010 Link to this post

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Kishor Dalwadi

40 posts

Member since:
Nov 2009

Posted 28 Aug 2010 Link to this post

Thanks You Sir.

it's working fine and expexted.

Kishor Dalwadi.

Luis

10 posts

Member since:
Oct 2010

Posted 27 Oct 2010 Link to this post

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

40 posts

Member since:
Nov 2009

Posted 28 Oct 2010 Link to this post

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

2 posts

Member since:
Jan 2011

Posted 29 Jan 2011 Link to this post

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

16 posts

Member since:
Apr 2009

Posted 24 Feb 2011 Link to this post

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

Admin

8457 posts

Posted 25 Feb 2011 Link to this post

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

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Ronnie

2 posts

Member since:
Jan 2011

Posted 25 Feb 2011 Link to this post

That worked! Thank you...

Tim

60 posts

Member since:
May 2011

Posted 19 May 2011 Link to this post

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

Admin

1052 posts

Posted 25 May 2011 Link to this post

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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

ConfigurationPanel.zip

Tim

60 posts

Member since:
May 2011

Posted 25 May 2011 Link to this post

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

18 posts

Member since:
Apr 2011

Posted 10 Aug 2011 Link to this post

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.

configurationpaneljpg.JPG

Helen

Admin

1052 posts

Posted 11 Aug 2011 Link to this post

Hi Ramkumar,

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

Kind regards,
Helen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

javx

1 posts

Member since:
Aug 2011

Posted 15 Aug 2011 Link to this post

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

Admin

1052 posts

Posted 16 Aug 2011 Link to this post

Hi,

When you download a trial you will get these files.

Best wishes,
Helen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Mohammed

9 posts

Member since:
Jun 2009

Posted 11 Jun 2012 Link to this post

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,

Error.JPG

mathieu cupryk

36 posts

Member since:
Aug 2009

Posted 16 Nov 2012 Link to this post

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