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

Add New Tabs Dynamically by Manual HTML Content Compilation

Out of the box, the Kendo UI TabStrip does not support the execution of dynamic Angular templates—directives and bindings. For more information on this issue, refer to this forum thread.

However, it is possible to use a workaround and to compile the HTML content manually after adding a new tab by targeting the element that needs to be compiled through $compile.

The example below demonstrates how to add new tabs by using the $compile AngularJS service and load content dynamically.

    <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content">
        <div ng-controller="MyCtrl">
          <div kendo-tab-strip="tabstrip" k-content-urls="[ null, null]">
            <!-- tab list -->
              <li class="k-state-active">First tab</li>
            <div style="padding: 1em">
              <kendo-grid options="mainGridOptions">


      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope, $compile){

        $scope.mainGridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "//"
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          sortable: true,
          pageable: true,
          dataBound: function() {
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px"
            field: "LastName",
            title: "Last Name",
            width: "120px"
          },{ command: { text: "Add Tab", click: insertContent }, title: " ", width: "180px" }]

        function insertContent(e) {
          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            { text: dataItem.FirstName + ' ' + dataItem.LastName + ' <button ng-click="removeTab($event)" class="k-button-icon"><span class="k-icon k-i-close"></span></button>',
             encoded: false,
             content: dataItem.Notes
        $scope.removeTab = function(event){
          var item = $(event.currentTarget).closest(".k-item");

See Also

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article