Dynamically adding/removing icons to tab headers at runtime

[Lee]

I have a tab strip with several tabs that contains various input fields for a user to modify and I'd like to show some sort of "edit" icon in the header of those tabs which have been modified to give the user a more visual indication of what has been changed before they save any changes.

I can see from the docs that you can set "ImageUrl" or "SpriteCssClasses" on a tab header when setting it up, but in this case, I'm looking at adding/removing images based on changed events from the widgets contained within the tab and can't seem to find any documented way of doing this.

Playing around with things I can do something like the following (where #TabStrip is the name given to my tab strip widget) to add a pencil icon to the header:

$("#TabStrip-tab-1 .k-link").prepend("<span class=\"k-icon k-i-edit\"></span>")

Which will give the following:

This is what I'm after, but I'm ideally looking for a way that is more "official" and supported rather than having to poke around inside the DOM of the tab strip itself.

Is there anything that could be used here or is that JS snippet above the best way to do this?

[Aleksandar]

Hello Lee,

Generally speaking the TabStrip does not expose an API that would allow you to insert/remove an icon. The approach you have taken is indeed feasible, though I would suggest a slightly different one.

• Use the SpriteCssClass options to set the desired icons for the tabs, for example

  .SpriteCssClasses("k-icon k-i-pencil")

• Once the document is loaded remove the "k-sprite" class from the TabStrip and hide the icon:

      $("document").ready(function(){
          $("#tabstrip .k-sprite").removeClass("k-sprite");
          $(".k-icon").hide();
      })

• You can then use jQuery to toggle the visibility of the font icon

  var tabstrip = $("#tabstrip").getKendoTabStrip();
  $(tabstrip.tabGroup.find("li .k-icon")[idx]).toggle() //where idx is the index of the tab that should have it's icon toggled

Here is a sample REPL demonstrating the approach. Clicking on a button toggles the icon for the respective tab.

I hope this helps.

Regards,
Aleksandar
Progress Telerik