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
encodedtofalse. - The example uses the
tabGroupfield and theappendandremoveTabStrip 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>