Skinnable Form Controls

41 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 06 Feb 2008 Link to this post

    Requirements

    RadControls version

    N/A

    .NET version

    2.x

    Visual Studio version

    2005

    programming language

    C#

    browser support

    all browsers supported by RadControls


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

  • Martin de Ruiter
    Martin de Ruiter avatar
    99 posts
    Member since:
    Jun 2005

    Posted 07 Feb 2008 Link to this post

    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
    Norsten avatar
    53 posts
    Member since:
    Feb 2007

    Posted 07 Feb 2008 Link to this post

    What a brilliant idea!!  your living up to your slogan... -"delivering more than expected!!!"
  • Maveric
    Maveric avatar
    39 posts
    Member since:
    Apr 2007

    Posted 08 Feb 2008 Link to this post

    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
    lchesnais avatar
    39 posts
    Member since:
    Feb 2007

    Posted 08 Feb 2008 Link to this post

    Excellent!
    I also hope it will be officialy part of Prometheus.
  • HHalim
    HHalim avatar
    69 posts
    Member since:
    Aug 2005

    Posted 09 Feb 2008 Link to this post

    Yes!!! +++1000 vote from me. As long as it's easy to change the css skin.
  • Alex
    Alex avatar
    6 posts
    Member since:
    Jul 2007

    Posted 13 Feb 2008 Link to this post

    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
    Per Holmqvist avatar
    194 posts
    Member since:
    Nov 2002

    Posted 13 Feb 2008 Link to this post

    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
    vbl vbl avatar
    18 posts
    Member since:
    Apr 2005

    Posted 17 Feb 2008 Link to this post

    Looks good,

    Could you also add an Image and Text button like in the rad toolbar.
  • Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Feb 2008 Link to this post

    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
    Jamie Ferrara avatar
    3 posts
    Member since:
    Nov 2004

    Posted 25 Feb 2008 Link to this post

    Is the source code available for this or could we get a strongly named version of the assembly please? Thank you!
  • Jamie Ferrara
    Jamie Ferrara avatar
    3 posts
    Member since:
    Nov 2004

    Posted 25 Feb 2008 Link to this post

    Oops, posted twice not sure how.
  • Ivo
    Admin
    Ivo avatar
    689 posts

    Posted 26 Feb 2008 Link to this post

    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
    Wardeaux avatar
    35 posts
    Member since:
    Aug 2006

    Posted 29 Feb 2008 Link to this post

    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
    s_erbentraut avatar
    7 posts
    Member since:
    Sep 2006

    Posted 29 Feb 2008 Link to this post

    This is a superb idea. It should definately be implemented as part of the standard control suite.
  • Amir Khawaja
    Amir Khawaja avatar
    1 posts
    Member since:
    Sep 2006

    Posted 29 Feb 2008 Link to this post

    This is a great idea.  I do think this should be included in Prometheus.  Keep up the good work.
  • Bosko Maksimovic
    Bosko Maksimovic avatar
    13 posts
    Member since:
    Oct 2012

    Posted 06 Mar 2008 Link to this post

    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!
  • Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 07 Mar 2008 Link to this post

    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
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 07 Mar 2008 Link to this post

    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
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 07 Mar 2008 Link to this post

    Sorry. Not just FF2 but IE6 too.

    --
    Stuart
  • Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 07 Mar 2008 Link to this post

    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
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 07 Mar 2008 Link to this post

    Bizarre! It's working fine now!

    Ho-hum.

    --
    Stuart
  • NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 11 Mar 2008 Link to this post

    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> 
  • Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 12 Mar 2008 Link to this post

    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
    px avatar
    87 posts
    Member since:
    Dec 2004

    Posted 12 Mar 2008 Link to this post

    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!
  • Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 13 Mar 2008 Link to this post

    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 avatar
    21 posts
    Member since:
    Apr 2007

    Posted 17 Mar 2008 Link to this post

    Thank You!  While filling out a skin survey earlier this morning I requested this and lo and behold, here it is.
  • Hessner
    Hessner avatar
    189 posts
    Member since:
    Mar 2003

    Posted 17 Mar 2008 Link to this post

    Nice.

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

    Regards
    Hessner
  • Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 18 Mar 2008 Link to this post

    Isn't that what RadCombobox is for?
  • donoho
    donoho avatar
    21 posts
    Member since:
    Apr 2007

    Posted 18 Mar 2008 Link to this post

    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             <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.
  • Back to Top