Add bootstrap badge to tab title

3 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 10 Jun Link to this post

    Is it possible to add a bootstrap badge to a tab title?

     

    I want to highlight the number of records in a tab panels, which is not initially selected.  Ideally, it would be something like:-

    <span class='badge'>10</span>

    Where the number would come from a variable (initially from the view bag).

     

    Is this possible at all?

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 14 Jun Link to this post

    Hi Andrew,

    To achieve this you should set .Encoded(false) to the TabStrip item text. As an example: 
    @{
        ViewBag.SomeValue = "20";
    }
     
    @(Html.Kendo().TabStrip()
       //....
      .Items(tabstrip => {
         tabstrip.Add().Text(("Some text <span class='badge'>") + (string)@ViewBag.SomeValue + ("</span>")).Encoded(false)
       //.....


    Regards,
    Iliana Nikolova
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 20 Jun in reply to Iliana Nikolova Link to this post

    That's great.

     

    Thanks

Back to Top