Add a Close Button to TabStrip Tabs

Environment

Product	Progress® Kendo UI® TabStrip for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I add a Close button to a Kendo UI for jQuery TabStrip tab?

Solution

You can programmatically remove the TabStrip tabs with JavaScript.

The following example shows how to add buttons inside the tabs to do this. The milestones of the approach are:

• You have to place the buttons in a <span> element, which wraps the whole tab text.
• When adding a new tab with a button programmatically, set encoded to false.
• The example uses the tabGroup field and the append and remove TabStrip methods.
• To distinguish the tab Remove buttons, the example also uses a data-type="remove" attribute.

<style>

  .k-tabstrip-items li .k-button {
    line-height: 1;
    padding: 0;
    vertical-align: top;
    margin-bottom: -2px;
  }

  .k-tabstrip-items li .k-icon {
    margin: 0;
  }

</style>

<div id="tabstrip">
  <ul>
    <li class="k-active">Item 1</li>
    <li><span>Item 2 <button data-type="remove" class="k-button k-button-icon"><span class="k-icon k-i-close"></span></button></span></li>
  </ul>
  <div>
    Content 1
    <p><button type="button" class="k-button" id="appendButton">Append Item</button></p>
  </div>
  <div>
    Content 2
  </div>
</div>

<script>
  $(function(){
    // Initialize the TabStrip. Server wrappers will generate the below line automatically.
    $("#tabstrip").kendoTabStrip();

    // Get the reference of the component.
    var tabstrip = $("#tabstrip").data("kendoTabStrip");

    tabstrip.tabGroup.on("click", "[data-type='remove']", function(e) {
        e.preventDefault();
        e.stopPropagation();

        var item = $(e.target).closest(".k-item");
        tabstrip.remove(item.index());
    });

    var tabCounter = tabstrip.items().length;

    $("#appendButton").click(function(){
      tabstrip.append({
        text: 'Item ' + (++tabCounter) + ' <button data-type="remove" class="k-button k-button-icon"><span class="k-icon k-i-close"></span></button>',
        encoded: false,
        content: "<p>Appended item " + tabCounter + " content</p>"
      });
      $(".k-button").kendoButton();
    });
    $(".k-button").kendoButton();
  });
</script>

See Also

• JavaScript API Reference of the Kendo UI for jQuery TabStrip
• Initialize the Data Grid in the TabStrip
• Scroll the TabStrip with the Keyboard