Updating Kendo TabStrip Item's Text dynamically

2 posts, 0 answers
  1. Amy
    Amy avatar
    1 posts
    Member since:
    Jun 2018

    Posted 05 Jun 2018 Link to this post

    Hello all,

    I would like to append the badge count of number of records (retrieved in the grid that appears when a Kendo TabStrip Item is selected) to the TabStrip Item's Text. So basically this is something like changing the TabStrip Item's Text dynamically. It would be really helpful if someone could suggest any ideas on how to achieve this. Thank you in advance!! 

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    809 posts

    Posted 08 Jun 2018 Link to this post

    Hello Amy,

    I would suggest subscribing to the TabStrip's select event. Then, in the event handler simply query the event item object to find the .k-link <span> element and use jQuery's text() method to modify its content:
    <script>
      var tabstrip = $("#tabstrip").kendoTabStrip({
        select: function(e) {
          var itemTextElement = $(e.item).find(".k-link");
                 
          itemTextElement.text("My Custom Text");
        }
      }).data("kendoTabStrip");
    </script>

    The above is also demonstrated on the following Dojo example. You can test it by clicking on the first tab - notice that the tab's text is changed. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top