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

DataSource.actions

configuration

Defines a collection of action buttons that are rendered in the tab. The actions buttons are rendered as part of the tab and can be used to provide additional functionality beyond the built-in close button.

dataSource.actions

Array

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          {
            text: "Tab with actions",
            content: "Tab content",
            actions: [
              {
                icon: "pencil",
                action: function(e) {
                  console.log("Edit tab", e);
                }
              },
              {
                icon: "refresh",
                action: function(e) {
                  console.log("Refresh tab", e);
                }
              }
            ]
          }
        ]
    });
</script>

dataSource.actions.action

Function

A function to be executed when the action button is clicked. The event object is passed as a parameter to the function.

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          {
            text: "Tab with actions",
            content: "Tab content",
            actions: [
              {
                icon: "pencil",
                action: function(e) {
                  console.log("Edit tab", e);
                }
              }
            ]
          }
        ]
    });
</script>

dataSource.actions.attributes

Object

Defines custom attributes to be applied to the action button element.

html

    <div id="tabstrip"></div>
    <script>
        $("#tabstrip").kendoTabStrip({
            dataTextField: "text",
            dataContentField: "content",
            dataSource: [
              {
                text: "Tab with actions",
                content: "Tab content",
                actions: [
                  {
                    icon: "pencil",
                    attributes: { "title": "Edit", "data-id": "edit-action" },
                    action: function(e) {
                      console.log("Edit tab", e);
                    }
                  }
                ]
              }
            ]
        });
    </script>

dataSource.actions.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content that is used for the action button.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          {
            text: "Tab with actions",
            content: "Tab content",
            actions: [
              {
                icon: "pencil",
                action: function(e) {
                  console.log("Edit tab", e);
                }
              }
            ]
          }
        ]
    });
</script>

dataSource.actions.iconClass

String

If set, this value will be appended to the action button's icon element class attribute. Provides an alternative way to specify an icon using custom CSS classes.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          {
            text: "Tab with actions",
            content: "Tab content",
            actions: [
              {
                iconClass: "k-icon k-i-pencil",
                action: function(e) {
                  console.log("Edit tab", e);
                }
              }
            ]
          }
        ]
    });
</script>