Apply style of a control to an another

4 posts, 1 answers
  1. SCT
    SCT avatar
    32 posts
    Member since:
    Jun 2012

    Posted 07 Aug 2012 Link to this post

     

    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.

  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 10 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SCT
    SCT avatar
    32 posts
    Member since:
    Jun 2012

    Posted 15 Aug 2012 Link to this post

    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.

  5. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 17 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top