Using the selected Skins Styles in UI for ASP.NET AJAX FormDecorator

Roger Barnes

38 posts

Member since:
May 2008

Posted 30 Jul 2010 Link to this post

I would like to have the ability for users to change their desired skin dynamically in my site, along with that, I would like to use specific styles of the selected skin for various items in my app.

Example, if my selected skin is Telerik, I would like to use the RadGrid.rgHeader style on a button or <div> or table cell. If I chane the skin, my buttons or <div> that are using the RadGrid.rgHeader style would change according to the selected skin.

Can you provide me with some insight on how to achieve this.

RadSkinManager works very nicely for skinning telerik controls, but how do I skin non telerik controls with specific styles from the selected skin.

Thanks in advance.

Roger

Cori

562 posts

Member since:
Jul 2010

Posted 03 Aug 2010 Link to this post

Hello Roger,

If you have the RadFormDecorator on the page and have it set to style your non-telerik controls (i.e. buttons, checkboxes, radio buttons, etc...), then the RadSkinManager control will change the skin used by the RadFormDecorator.

I hope that helps.

Roger Barnes

38 posts

Member since:
May 2008

Posted 03 Aug 2010 Link to this post

I realize the FormDecorator will skin standard asp controls to the selected skin.

But that's not what my question was. How would I apply the style of a Radgrid Header to a div for example?
Or the Background style of a RadMenu to a Table Cell.
Based on the selected skin.

So my div or table cell would change as I change the sins.

Roger

Bozhidar

Admin

693 posts

Posted 04 Aug 2010 Link to this post

Hello Roger,

My suggestion is to use Firebug extension for Firefox, or WebDevoloper Toolbar for Internet Explorer and to detect which of our styles you want to use in your HTML elements. Then you could create your own CSS file and to apply to your elements same or similar styles, that are applied to Telerik elements in order to have more style consistent page layout .

Kind regards,
Bojo
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

Roger Barnes

38 posts

Member since:
May 2008

Posted 04 Aug 2010 Link to this post

Thanks for the reply, I've tried that already and was unable to get what I wanted.

I've tried nearly every possible combination for ???? and can't get the header style of the grid for the selected skin. class=????? can't contain the skin name as I want it to change when I change skins.

<div class="???????>This is my Grid Header Style </div>

The output rendered from my test grid



 

<div id="Div2" class="RadGrid RadGrid_Forest"> 
        <table cellspacing="0" class="rgMasterTable" border="0" id="Table1" style="width: 100%; 
            table-layout: auto; empty-cells: show;"> 
            <colgroup> 
                <col /> 
                <col /> 
            </colgroup> 
            <thead> 
                <tr> 
                    <th scope="col" class="rgHeader"> 
                        Name 
                    </th> 
                    <th scope="col" class="rgHeader"> 
                        Location 
                    </th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr class="rgRow" id="Tr1"> 
                    <td> 
                        First Name 
                    </td> 
                    <td> 
                        Second Location 
                    </td> 
                </tr> 
                <tr class="rgAltRow" id="Tr2"> 
                    <td> 
                        Second Name 
                    </td> 
                    <td> 
                        Second Location 
                    </td> 
                </tr> 
            </tbody> 
        </table> 
        <input id="RadGrid1_ClientState" name="RadGrid1_ClientState" type="hidden" /> 
    </div>

Bozhidar

Admin

693 posts

Posted 05 Aug 2010 Link to this post

Hello Roger,

In your case, there is no way, your table to make a request to the resources files and to have CSS class names and styles applied. My suggestion is to create a RadGrid custom skin, in which you could add all CSS classes from the rendered grid. Then your table will use the same classes and should have the same look and feel as the original gird table. Of course, that table will not have filtering, paging, sorting etc.

You could find helpful, the following articles form our Help Center: RadGrid: Modifying Existing Skins/Creating New Skins and Understanding HTML Output and CSS Styles.

Attached is table.zip, which contains the HTML output for a grid table, with all necessary class names applied. Once you used it, you will be able to insert in it the elements that you want, and the table will be Grid styled.

Greetings,
Bojo
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

table.zip

Roger Barnes

38 posts

Member since:
May 2008

Posted 05 Aug 2010 Link to this post

Apparently I'm still not explaining this correctly, your table.zip and the html that I posted in my last post are both the html output from a rendered grid.

I don't want to create a custom skin, I'm happy with the skins and the way they function.

All I want to do is use the existing styles from the current skins on non telerik controls or standard html elements.

<div class="rgHeader">I want this to be the same style as the selected Skins RadGrid Header</div>

or

<asp:Label ID="Label1" CssClass="rgRow">I want this to be the same style as the selected skins RadGrid Row</asp:Label>

Bozhidar

Admin

693 posts

Posted 05 Aug 2010 Link to this post

Hi Roger,

Please, find attached gridsimplehtml.zip where I have created a sample HTML table with the look and feel of a RadGrid table. All the necessary resources (CSS, Sprites) I took from C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q2 2010\Skins. If you want to use another skin for your project, you could take it from there and just to replace it in the necessary folders and to change the following piece of code according to your preferable skin:

<div class="RadGrid RadGrid_Vista" id="RadGrid1" tabindex="0">

All the best,
Bojo
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

gridsimplehtml.zip

Roger Barnes

38 posts

Member since:
May 2008

Posted 05 Aug 2010 Link to this post

This still isn't what I'm trying to achieve.

I'm not trying to create a html Table that looks like the output of a grid.

Let me try again, all I want to do is be able to use standard html elements or asp controls and apply a selective style from my currently selected skin to that element.

I used the RadGrid Header style as an example only.
If I used the div or asp:label in my page, and that's the entire contents of my page, and my skin is set to Forest, I want the div background color to be the same color as the color of a Radgrid Header row, if I had a grid on the page.

If i change my skin to Sunset, I want the backgrounds of the div or asp:label to be the same as a Radgrid Header row, if I had a grid on the page.

I don't know how else to explain it.

<div class="rgHeader">I want this to be the same style as the selected Skins RadGrid Header</div>

or

<asp:Label ID="Label1" CssClass="rgRow">I want this to be the same style as the selected skins RadGrid Row</asp:Label>

Radoslav

Admin

1566 posts

Posted 10 Aug 2010 Link to this post

Hello Roger,

You could try the following approach. For all skins you could create your own custom css classes, or get them from RadControls skins, which you could apply on the html elements. The html elements' wrapper element could have the skin name css class. For example:

<div class="web20">

<div class="header"></div>

<div class="main"></div>

<div class="footer"></div>

</div>

.web20 .header

{

/* styles for header */

}

.web20 .main

{

/* styles for main div */

}

.web20 .footer

{

/* styles for footer */

}

.telerik .header

{

/* styles for header */

}

.telerik.main

{

/* styles for main div */

}

.telerik.footer

{

/* styles for footer */

}

When the user change the skin for the controls to "telerik". You could change the div wrapper's css class to telerik.
I am sending you a simple example demonstrating the mentioned approach.

The other way is to build asp themes and change them dynamically or include different css style files. For more information please check out the following links:
http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
http://msdn.microsoft.com/en-us/library/0yy5hxdk%28VS.80%29.aspx
http://www.15seconds.com/issue/040105.htm
http://www.codeproject.com/KB/aspnet/ThemesAndSkins.aspx

I hope this helps.

Greetings,
Radoslav
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

example.zip