Telerik

or Register (Why?)

Search Site

Code Library

Home / Community / Code Library / RadControls for ASP.NET and ASP.NET AJAX: General and Integration Projects / Skinnable Form Controls

Not answered Skinnable Form Controls

Feed from this thread

Telerik Admin Master avatar

Posted on Feb 6, 2008 (permalink)

Requirements
RadControls version	N/A
.NET version	2.x
Visual Studio version	2005
programming language	C#
browser support	all browsers supported by RadControls

PROJECT DESCRIPTION

If you wish to modify the appearance of the checkboxes, radiobuttons, or buttons on your page all you need to do is add a FormDecorator control on your form. You can choose whether to skin only the checkboxes, the radiobuttons, the buttons or all of them by setting the DecoratedControls property. The FormDecorator offers four skins - Classic, Vista, Mac, and XP.

Online Demo: http://www.telerik.com/demos/aspnet/formdecorator/Default.aspx

Attached files

FormDecorator_2008_03_07.zip

Martin de Ruiter Intermediate Martin de Ruiter's avatar

Posted on Feb 7, 2008 (permalink)

Nice to see Telerik experimenting with this. Although for an official release it needs enhancements obviously (like hovering, click and disabled styles), it's a very nice basis. I hope to see this included in Prometheus sooner or later :-)

Norsten

Posted on Feb 7, 2008 (permalink)

What a brilliant idea!! your living up to your slogan... -"delivering more than expected!!!"

Maveric Maveric's avatar

Posted on Feb 8, 2008 (permalink)

It's excellent.
I hope you 'll include this features in the next release of prometheus
and extend it with all skin.
Very good job.
Thanks Telerik

Maveric

lchesnais avatar

Posted on Feb 8, 2008 (permalink)

Excellent!
I also hope it will be officialy part of Prometheus.

Hart

Posted on Feb 9, 2008 (permalink)

Yes!!! +++1000 vote from me. As long as it's easy to change the css skin.

Alex

Posted on Feb 13, 2008 (permalink)

Yes! I have been looking for something like this (exactly like this) for a while and have not seen anyone offering this. These controls are great and I really, really hope they become official. Thank you!

Per Holmqvist Master Per Holmqvist's avatar

Posted on Feb 13, 2008 (permalink)

This was realy great and what we all are looking for.
Noticed the hoover and disable status.
But i never saw any hoover/disabled on the buttons.
As you use to say, deliver more than expected, hope this will be part of Q1;)

Your account have been added with 100 000 Telerikpoints ;)

vbl vbl avatar

Posted on Feb 17, 2008 (permalink)

Looks good,

Could you also add an Image and Text button like in the rad toolbar.

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Feb 25, 2008 (permalink)

Pretty neat, although adding a tri-state checkbox is prolly out of the scope of this project, it would certainly make a fabulous enhancement.

--
Stuart

Jamie Ferrara avatar

Posted on Feb 25, 2008 (permalink)

Is the source code available for this or could we get a strongly named version of the assembly please? Thank you!

Jamie Ferrara avatar

Posted on Feb 25, 2008 (permalink)

Oops, posted twice not sure how.

Telerik Admin admin's avatar

Posted on Feb 26, 2008 (permalink)

Hello all,

Thank you for the feedback. We will soon release an update of the project which will add new states (hover, disabled, etc) and many new skins.

The Skinnable Form Controls will be part of RadControls "Prometheus" (Telerik.Web.UI) as of our Q1 Release in mid-April.

Please, stay tuned and send us your comments/ideas.

Kind regards,
Ivo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Wardeaux avatar

Posted on Feb 29, 2008 (permalink)

Guys,
What can I say?!?! I just got the EM announcing this project! You have no idea how much I've had to go through to get all my buttons and checkboxes to have the same appearance as my combobox... oh yeah, I guess you do... that's why you made this!! ; ) This is AWESOME and I'm so anxious to implement this. BY ALL MEANS make this part of the regular ASP.NET Suite and add the matching skins from the other controls like RadCombo and Calendar (two controls I use heavily)!! GREAT JOB!!
wardeaux

s_erbentraut avatar

Posted on Feb 29, 2008 (permalink)

This is a superb idea. It should definately be implemented as part of the standard control suite.

Amir Khawaja avatar

Posted on Feb 29, 2008 (permalink)

This is a great idea. I do think this should be included in Prometheus. Keep up the good work.

Bosko Maksimovic avatar

Posted on Mar 6, 2008 (permalink)

Great idea! It would be nice to see this product released with skins that match the standard Telerik skins...allowing the developer to skin all of the controls (Telerik and non-Telerik) the same way.

A skinned dropdown box would be a nice addition as this has always been a sore spot in regards to design and skinning.

Great work! Looking forward to using it!

Telerik Admin admin's avatar

Posted on Mar 7, 2008 (permalink)

Hello guys,

I am happy to notify you that the project and the live demo have been updated.

What is new?
==========

10 skins (two more coming for the official release)
Hover/Out states for the buttons using pure CSS
Caching of images for IE6 (smoother user experience)
CSS for disabled radiobuttons, checkboxes and buttons
Various CSS look & feel improvements

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Mar 7, 2008 (permalink)

The 'live demo' generates this error in FF2 ...

Telerik is not defined
http://www.telerik.com/demos/aspnet/formdecorator/Default.aspx
Line 90

--
Stuart

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Mar 7, 2008 (permalink)

Sorry. Not just FF2 but IE6 too.

--
Stuart

Telerik Admin admin's avatar

Posted on Mar 7, 2008 (permalink)

Hello Stuart,

I've just tested the site with all major browsers but was not able to reproduce the problem. Maybe it was due to some caching issue - can you please try opening the demo again?

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Mar 7, 2008 (permalink)

Bizarre! It's working fine now!

Ho-hum.

--
Stuart

NS Intermediate NS's avatar

Posted on Mar 11, 2008 (permalink)

This looks great !
I have one problem though.
If I use the formdecorator on a asp:button and I enable/display my button onclick using on the RadAjaxManager then the onresponseend and onrequeststart code doesn't work anymore.

This is the relevant code:

    
             <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
        
                         <script type="text/javascript">  
        
                        function OnRequestStart(sender, args)    
        
                         {  
        
                            var btnUID = "<%= btnSearch.UniqueID %>";   
        
                            var btnCID = "<%= btnSearch.ClientID %>";    
        
                            if (args.EventTarget == btnUID)    
        
                            {    
        
                               var btn = document.getElementById(btnCID);    
        
                               btn.value = "Please wait while the results are retrieved...";    
        
                               btn.disabled = true;    
        
                            }    
        
                         }    
        
                         function OnResponseEnd(sender, args)    
        
                         {    
        
                           var btnUID = "<%= btnSearch.UniqueID %>";    
        
                           var btnCID = "<%= btnSearch.ClientID %>";    
        
                           if (args.EventTarget == btnUID)    
        
                           {    
        
                              var btn = document.getElementById(btnCID);    
        
                              btn.value = "Refresh the Business View";    
        
                              btn.disabled = false;                    
        
                           }    
        
                         }    
        
                        </script>  
        
                    </telerik:RadScriptBlock>

    
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                <AjaxSettings> 
        
                <telerik:AjaxSetting AjaxControlID="btnSearch">  
        
                    <UpdatedControls> 
        
                        <telerik:AjaxUpdatedControl ControlID="pnl01" LoadingPanelID="LoadingPanel1" /> 
        
                    </UpdatedControls> 
        
                </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
                <ClientEvents OnRequestStart="OnRequestStart" OnResponseEnd="OnResponseEnd"></ClientEvents> 
        
                </telerik:RadAjaxManager>

Telerik Admin admin's avatar

Posted on Mar 12, 2008 (permalink)

Hello NS,

I tested your code and the events are fired every time - you can check this for yourself by placing alerts in the 2 functions.
The problem that I see however, is that you are changing the look (the width and the text) of the button in these events. Currently the FormDecorator does not cover such scenarios - we will improve the behavior of the control in one of the future updates. What we are planning to do is to provide the developer with a way to detect such changes (the ones that are possible to be detected) and to set the behavior of the FormDecorator in these cases.

Greetings,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

px Intermediate avatar

Posted on Mar 12, 2008 (permalink)

Hi guys,

When I have controls etc in a RadUpdatePanel and use the extender all my buttons look great on page load but lose there style on postback . Is this normal / know issue?

Cheers,

Pete

PS: Top control. Love how easy it is to use!

Telerik Admin admin's avatar

Posted on Mar 13, 2008 (permalink)

Hello Peter,

When you perform a partial update by using Ajax, the FormDecorator control does not detect such update and that is why it dos not "redecorate" the controls. We will improve the behavior of the control in one of the following updates when, as Ivo said, it will be ported in the Prometheus suite. This will allow it to use the MS Ajax capabilities and to detect such partial updates.

Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

donoho donoho's avatar

Posted on Mar 17, 2008 (permalink)

Thank You! While filling out a skin survey earlier this morning I requested this and lo and behold, here it is.

Hessner MVP Hessner's avatar

Posted on Mar 17, 2008 (permalink)

Nice.

I would like to see dropdown/listbox enhancements to, would't you? :-)

Regards
Hessner

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Mar 18, 2008 (permalink)

Isn't that what RadCombobox is for?

donoho donoho's avatar

Posted on Mar 18, 2008 (permalink)

I ran into this very question yesterday. Style DropDowns or Replace all with Comboboxes. Unfortunately sometimes Comboboxes are just overkill (if your only goal is to skin) Here are two examples that should do the same thing:

    
            1
            RADCOMBOBOX (PROMETHEUS): 
        
            2
            <TD style="WIDTH: 50px; HEIGHT: 21px">Combobox</TD> 
        
            3
            <TD style="WIDTH: 50px; HEIGHT: 21px"> 
        
            4
              <DIV class="RadComboBox RadComboBox_WebBlue " id=Search1_ddlComboboxFltr style="DISPLAY: inline; WIDTH: 45px; ZOOM: 1" value="<>"> 
        
            5
                <TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" cellSpacing=0 cellPadding=0 border=0> 
        
            6
                  <TBODY> 
        
            7
                    <TR> 
        
            8
                      <TD class="rcbInputCell rcbInputCellLeft" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px; WIDTH: 100%"> 
        
            9
                        <INPUT class=rcbInput id=Search1_ddlComboboxFltr_Input style="DISPLAY: block" readOnly value="<>" name=Search1$ddlComboboxFltr_Input autocomplete="off"></INPUT> 
        
            10
                      </TD> 
        
            11
                      <TD class="rcbArrowCell rcbArrowCellRight" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px"> 
        
            12
                        <A id=Search1_ddlComboboxFltr_Arrow style="DISPLAY: block; OVERFLOW: hidden; POSITION: relative; outline: none">select</A> 
        
            13
                      </TD> 
        
            14
                    </TR> 
        
            15
                  </TBODY> 
        
            16
                </TABLE> 
        
            17
                <DIV class=rcbSlide style="Z-INDEX: 300"> 
        
            18
                  <IFRAME style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" src="javascript:'';" frameBorder=0></IFRAME> 
        
            19
                  <DIV class=RadComboBoxDropDown_WebBlue id=Search1_ddlComboboxFltr_DropDown style="DISPLAY: none; FLOAT: left"> 
        
            20
                    <DIV class="rcbScroll rcbWidth" style="WIDTH: 100%"> 
        
            21
                      <UL class=rcbList style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; ZOOM: 1; LIST-STYLE-TYPE: none; lmargin: 0"> 
        
            22
                      <LI class="rcbItem "> 
        
            23
                      <LI class="rcbItem ">= 
        
            24
                      <LI class="rcbItem ">&lt;&gt;</LI> 
        
            25
                      </UL> 
        
            26
                    </DIV> 
        
            27
                  </DIV> 
        
            28
                </DIV> 
        
            29
                <INPUT id=Search1_ddlComboboxFltr_ClientCombobox type=hidden value='{"logEntries":null,"value":"2","text":"<>","enabled":true}' name=Search1_ddlComboboxFltr_ClientCombobox>  
        
            30
              </DIV> 
        
            31
            </TD>

    
            1
            ASP:DROPDOWNBOX: 
        
            2
            <TD style="WIDTH: 60px">DropDown</TD> 
        
            3
            <TD style="WIDTH: 50px"> 
        
            4
              <SELECT id=Search1_ddlDropDownFltr name=Search1$ddlDropDownFltr>  
        
            5
                <OPTION value=0 selected></OPTION>  
        
            6
                <OPTION value=1>=</OPTION>  
        
            7
                <OPTION value=2>&lt;&gt;</OPTION> 
        
            8
              </SELECT> 
        
            9
            </TD>

These differences touch on several issues. I have a form which requires 2 load on demand comboboxes and 16 databound dropdowns. Replacing the 16 dropdowns with comboboxes takes the amount of code dropped to the client from @4,240 characters to @33,632. Scalability has a noticable impact on remote offices with slower connections.

For some reason, after assigning a datasource to the radcombobox, the DataTextField and DataValueField must be populated manually vs dropdowns with appropriate fields in the properties window. Also in this particular instance, when a user selects option with a text value of [less than/greater than] in the combobox, the &amplt;&ampgt; shows up instead of the actual characters. This was not an issue with the dropdown list. Even stranger, the characters display properly after postback.

Point is, as awesome as the radcombobox is, there are situations where simplicity trumps functionality.

Hessner MVP Hessner's avatar

Posted on Mar 18, 2008 (permalink)

I agree - absolutely!

Regards
Hessner

Norsten

Posted on Mar 18, 2008 (permalink)

I agree also! -it really does get a bit html heavy when you start to use a few RadComboBoxes on a form.

Or are there plans for the RadCombobox (plus the RadInput controls) to support a SharedID property like the RadCalender...

(http://www.telerik.com/DEMOS/ASPNET/Prometheus/Calendar/Examples/Design/Sunny/DefaultCS.aspx)

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Mar 19, 2008 (permalink)

Point is, as awesome as the radcombobox is, there are situations where simplicity trumps functionality.
It's kinda hard to argue against that.

--
Stuart

Willem Willem's avatar

Posted on Apr 10, 2008 (permalink)

Hi all,

I am using the FormDecorator. In code behind i am moving some buttons to absolute places; however...the FormDecorator alters my top and left positions.

Telerik Admin admin's avatar

Posted on Apr 10, 2008 (permalink)

Hi Willem,

You can use the following code to work around the issue:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:radformdecorator id="FormDecorator1" runat="server" decoratedcontrols="all" skin="Web20">
</telerik:radformdecorator>
<asp:Button ID="Button1" runat="server" Text="Button" style="left: 510px; position: absolute; top: 573px; width: 100px;" />

<script type="text/javascript">
Sys.Application.add_load(function()
{
    var button = $get("Skinned" + "<%=Button1.ClientID%>");
    var realButton = $get('Button1');
    button.style.top = realButton.offsetTop + 'px';
    button.style.left = realButton.offsetLeft + 'px';
});
</script>

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Larry

Posted on May 27, 2008 (permalink)

Is there a work-around for this issue yet?

Telerik Admin admin's avatar

Posted on May 28, 2008 (permalink)

Hello Larry,

The workaround for the absolute positioned button elements is to use the following code:

<script type="text/javascript">
Sys.Application.add_load(function()
{
    var button = $get("Skinned" + "<%=Button1.ClientID%>");
    var realButton = $get('Button1');
    button.style.top = realButton.offsetTop + 'px';
    button.style.left = realButton.offsetLeft + 'px';
});
</script>

This is the best way to solve the problem for the time being.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Telmo Silva avatar

Posted on Jul 9, 2008 (permalink)

Anyone experience some weird behaviour with the RadComboBox if the FormDecorator is also used?

1. Page without FormDecorator control

<telerik:RadComboBox ID="field_Language" runat="server" Skin="Vista" Width="205px"> <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> <Items> <telerik:RadComboBoxItem runat="server" Text="English" Selected="true" /> <telerik:RadComboBoxItem runat="server" Text="Francais" /> <telerik:RadComboBoxItem runat="server" Text="Deutsch" /> </Items> </telerik:RadComboBox>

Result: RadComboBox displays English as the default selection in the ComboBox

2. I add the following to the page...
<telerik:radformdecorator id="FormDecorator1" runat="server" skin="Sunset" DecoratedControls="Buttons" > </telerik:radformdecorator>

Result: RadComboBox displays nothing as the default selection in the ComboBox, additionally if I drop down the selection list and select 'English' again it still displays nothing. I need to change it to another one of the values for it to finally display.

Help?

Stuart Hemming MVP Stuart Hemming's avatar

Posted on Jul 10, 2008 (permalink)

Telmo,

Go to the FormDecorator forum and read the fist topic in the list; you'll find your answers there.

--
Stuart

Telerik Admin admin's avatar

Posted on Jul 10, 2008 (permalink)

Hi guys,

Telmo, indeed, Stuart is right (thanks, Stuart) - you need to check the following forum thread:
http://www.telerik.com/community/forums/thread/b311D-bekebd.aspx

All the problems described there are fixed in the "Futures" version that was released 2 days ago and which you can download from your Client.net account.

All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Telmo Silva avatar

Posted on Jul 10, 2008 (permalink)

Thanks Stuart.

Thanks for the support guys. Job well done.

T.

Not answered Skinnable Form Controls

Products

Consulting

Purchase

Support

Community

Company

1	RADCOMBOBOX (PROMETHEUS):
2	<TD style="WIDTH: 50px; HEIGHT: 21px">Combobox</TD>
3	<TD style="WIDTH: 50px; HEIGHT: 21px">
4	<DIV class="RadComboBox RadComboBox_WebBlue " id=Search1_ddlComboboxFltr style="DISPLAY: inline; WIDTH: 45px; ZOOM: 1" value="<>">
5	<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" cellSpacing=0 cellPadding=0 border=0>
6	<TBODY>
7	<TR>
8	<TD class="rcbInputCell rcbInputCellLeft" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px; WIDTH: 100%">
9	<INPUT class=rcbInput id=Search1_ddlComboboxFltr_Input style="DISPLAY: block" readOnly value="<>" name=Search1$ddlComboboxFltr_Input autocomplete="off"></INPUT>
10	</TD>
11	<TD class="rcbArrowCell rcbArrowCellRight" style="MARGIN-TOP: -1px; MARGIN-BOTTOM: -1px">
12	<A id=Search1_ddlComboboxFltr_Arrow style="DISPLAY: block; OVERFLOW: hidden; POSITION: relative; outline: none">select</A>
13	</TD>
14	</TR>
15	</TBODY>
16	</TABLE>
17	<DIV class=rcbSlide style="Z-INDEX: 300">
18	<IFRAME style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); LEFT: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" src="javascript:'';" frameBorder=0></IFRAME>
19	<DIV class=RadComboBoxDropDown_WebBlue id=Search1_ddlComboboxFltr_DropDown style="DISPLAY: none; FLOAT: left">
20	<DIV class="rcbScroll rcbWidth" style="WIDTH: 100%">
21	<UL class=rcbList style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; ZOOM: 1; LIST-STYLE-TYPE: none; lmargin: 0">
22	<LI class="rcbItem ">
23	<LI class="rcbItem ">=
24	<LI class="rcbItem "><></LI>
25	</UL>
26	</DIV>
27	</DIV>
28	</DIV>
29	<INPUT id=Search1_ddlComboboxFltr_ClientCombobox type=hidden value='{"logEntries":null,"value":"2","text":"<>","enabled":true}' name=Search1_ddlComboboxFltr_ClientCombobox>
30	</DIV>
31	</TD>

1	ASP:DROPDOWNBOX:
2	<TD style="WIDTH: 60px">DropDown</TD>
3	<TD style="WIDTH: 50px">
4	<SELECT id=Search1_ddlDropDownFltr name=Search1$ddlDropDownFltr>
5	<OPTION value=0 selected></OPTION>
6	<OPTION value=1>=</OPTION>
7	<OPTION value=2><></OPTION>
8	</SELECT>
9	</TD>