Adding Text to the RibbonBar

6 posts, 0 answers
  1. Robin
    Robin avatar
    30 posts
    Member since:
    Jun 2012

    Posted 05 Nov 2014 Link to this post

    Hello,

    is it possible to add text to the top right side of the RibbonBar (basically on the right side of the tabs)?

    Thanks in advance,
    Robin
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 10 Nov 2014 Link to this post

    Hello Robin,

    The RadRibbon tabs are wrapped in unordered list element (<ul>) that has class "rrbTabs". A possible solution would be to dynamically add a list item element ( <li>) to the <ul> element and float it to the right for example.

    Please note that such functionality does not come of the box with the RadRibbonBar so we can not guarantee that this will work as expected in all scenarios and cases.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robin
    Robin avatar
    30 posts
    Member since:
    Jun 2012

    Posted 19 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Hello Boyan,

    i have tried to implement your suggested solution, but I don't seem to be able to get it to work properly.
    Could you provide sample-code?

    Thanks in advance,
    Robin
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Nov 2014 Link to this post

    Hello,

    Please find below a sample solution that floats the "Custom tab" to the right.
    //markup code
    <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
        <Tabs>
            <telerik:RibbonBarTab Text="Item 1"></telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Item 2"></telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Item 3"></telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Item 4"></telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Custom tab" CssClass="customClass"></telerik:RibbonBarTab>
        </Tabs>
    </telerik:RadRibbonBar>
    //css
    <style type="text/css">
            .RadRibbonBar .rrbTab.customClass {
                float:right;
            }
        </style>

    If you want to remove the border when the tab is hovered ( to look like a plain text instead of RadRibbonBar tab) you can apply the following style:
    //css
    .RadRibbonBar .rrbTab.customClass .rrbTabLabel {
                    border-width:0px;
            }



    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Robin
    Robin avatar
    30 posts
    Member since:
    Jun 2012

    Posted 26 Nov 2014 Link to this post

    Hello Boyan,

    thank you very much, that helped a lot. I cannot seem to get the border-width to work though, it doesnt seem to change the appearance.
    Also, is there a way to disable the RibbonBarTab so that it cannot be clicked?

    Thanks in advance,
    Robin
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Dec 2014 Link to this post

    Hello Robin,

    Please find below a code snippet:
    //css
    .RadRibbonBar .rrbTab.customClass {
        float: right;
    }
     
        .RadRibbonBar .rrbTab.customClass .rrbTabLabel {
            border-width: 0px;
        }
     
    html .RadRibbonBar .rrbTab.customClass .rrbTabLabel {
        cursor: default;
    }
     
     
    html .RadRibbonBar .customClass.rrbHoveredTab .rrbTabLabel,
    html .RadRibbonBar .customClass.rrbSelectedTab .rrbTabLabel {
        background: transparent;
    }

    Also you can use the RadRibbonBar OnClientSelectedTabChanging and cancel the change.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017