Apply style of a control to an another

[SCT]

 

Good day,

We would like to know if is there any way to apply style of a control to an another. We have table inside RadPanelBar. Its looks fine with Metro style. Text is gray (#767676) and also there is bigger space between rows. If table is outside RadPanelBar, text is black and row space is not so big.

Question is how to apply style from RadPanelBar to another object. We apply class rfdAspLabel. Text is good colored but that’s all. There is now style for table formatting.

Thank you in advance for your advice.

[Tsvetina]

Hello,

This cannot be achieved out of the box using RadSkinManager as it styles only RadControls.

To have an element that is not a part of a RadPanelBar use its styles, you could inspect the CSS rules applied inside the control in a tool like Firebug and assign them to the outside element through a different class, for example:

.metroTable{
    color: #767676;
    font: 12px/24px "Segoe UI",Arial,sans-serif;
}

<table class="metroTable">
    <tr>
        <td>
            Row1
        </td>
    </tr>
    <tr>
        <td>
            Row2
        </td>
    </tr>
    <tr>
        <td>
            Row3
        </td>
    </tr>
</table>

Or you can see what is the selector used to apply these styles to the table and give the outside table the same class name as the one used there. However, this may lead to the need of adding a container element to build the same hierarchy in the classes:

<div class="RadPanelBar_Metro">
    <table class="rpTemplate">
        <tr>
            <td>
                Row1
            </td>
        </tr>
        <tr>
            <td>
                Row2
            </td>
        </tr>
        <tr>
            <td>
                Row3
            </td>
        </tr>
    </table>
</div>

Greetings,
Tsvetina
the Telerik team

[SCT]

Hi,

Thank you very much. Yes that’s the way to solve the problem. But in our web site is possible to change style by user. Metro is default style, but this option is available. So we are looking for a solution where is possible to use the style of RadPanelBar outside RadPanelBar.
Something similar like Panel etc. Where a style is automatically changed in depends on user settings.
In our context is RadPanelBar used as “configuration” panel like in yours web site. So there is content inside and outside RadPanelBar on one page. So we need to make it look the same.

Thank you in advance for your advice.

[Tsvetina]

Hello,

You can use a code block to evaluate the skin currently used by the panel bar and render it in the class name of the wrapper div. Or if you have a skin manager, directly the Skin value of the manager:

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true">
</telerik:RadSkinManager>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server">
    <Items>
        <telerik:RadPanelItem Text="Item1">
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item1">
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item2">
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <div class="RadPanelBar_<%=RadSkinManager1.Skin %>">
        <table class="rpTemplate">
            <tr>
                <td>
                    Row1
                </td>
            </tr>
            <tr>
                <td>
                    Row2
                </td>
            </tr>
            <tr>
                <td>
                    Row3
                </td>
            </tr>
        </table>
    </div>
</telerik:RadCodeBlock>

Greetings,
Tsvetina
the Telerik team