How to add Twitter Bootstrap badge to Text off PanelBar?

3 posts, 1 answers
  1. Damian
    Damian avatar
    8 posts
    Member since:
    Mar 2013

    Posted 06 Oct 2013 Link to this post

    Hello,

    I would like to add a Twitter Bootstrap badge to Text off PanelBar? I tried this, but it didn't work:
    01.@(Html.Kendo().PanelBar()
    02.     .Name("NavigationBar")
    03.     .Items(panelBar =>
    04.    {
    05.           panelBar.Add().Text(@LayoutResource.Actions)
    06.         .Items(item =>
    07.         {
    08.              item.Add().Content("<a href=\"#\"><span class=\"badge pull-right\">42</span>Home</a>");
    09.         });
    10.    }  
    11. )
    12. )
    I'll be grateful for help. In atachments is a screen with this what I mean.

    Damian
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Oct 2013 Link to this post

    Hi Damian,

    The following demo shows how to add an element to the right side of a PanelBar item in general. I am not familiar with the BootStrap CSS classes and styles that you want to use. You can customize the example to fit your exact requirements.

    http://jsfiddle.net/dimodi/5ufPe/

    The corresponding MVC wrapper configuration is

    panelbar.Add()
        .Encoded(false)
        .Text("<span class=\"myNumber\">123</span>Home")

    Please mind the difference between Text() and Content(), which is demonstrated in the MVC PanelBar demos.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Damian
    Damian avatar
    8 posts
    Member since:
    Mar 2013

    Posted 07 Oct 2013 Link to this post

    Thank you very much. This is the effect which I meant.

    Regards,
    Damian
Back to Top