New to Kendo UI for jQuery? Download free 30-day trial

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-state-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 widget reference
    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

In this article