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

DataSource

configuration

The data source of the widget which is used to display the items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.

dataSource

Object|Array|kendo.data.DataSource

<div id="tabstrip"></div>

<script>
  $("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataSource: [
      { Name: "Tab1"},
      { Name: "Tab2"}
    ]
  });
</script>

dataSource.actions

Array

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.

<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.attributes

Object

Defines custom attributes to be applied to the tab element.

pseudo

    <div id="tabstrip"></div>
    <script>
        $("#tabstrip").kendoTabStrip({
            dataTextField: "text",
            dataContentField: "content",
            dataSource: [
              {
                text: "Tab 1",
                content: "Tab 1 content",
                attributes: { "data-custom": "value", "title": "Tab 1 tooltip" }
              },
              { text: "Tab 2", content: "Tab 2 content" }
            ]
        });
    </script>

dataSource.closable

Boolean

Specifies whether this specific tab can be closed via a close button. When set to true, the tab includes a close icon that triggers tab removal when clicked. This overrides the global closable setting for this specific tab.

Default: false

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          { text: "Tab 1", content: "Tab 1 content" },
          { text: "Tab 2 (closable)", content: "Tab 2 content", closable: true },
          { text: "Tab 3", content: "Tab 3 content" }
        ]
    });
</script>

dataSource.content

String

The content to be displayed in the tab panel when the tab is selected.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          { text: "Tab 1", content: "Tab 1 content" },
          { text: "Tab 2", content: "Tab 2 content" }
        ]
    });
</script>

dataSource.enabled

Boolean

Specifies whether the tab is enabled or disabled. Disabled tabs cannot be selected or focused and are displayed with a different visual style.

Default: true

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          { text: "Tab 1", content: "Tab 1 content" },
          { text: "Tab 2", content: "Tab 2 content", enabled: false },
          { text: "Tab 3", content: "Tab 3 content" }
        ]
    });
</script>

dataSource.icon

String

Тhe name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the tab element.

See web icons help article for more details on Kendo UI icons.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataIconField: "icon",
        dataSource: [
          { text: "Home", icon: "home", content: "Home content" },
          { text: "Settings", icon: "gear", content: "Settings content" }
        ]
    });
</script>

dataSource.iconClass

String

If set, this value will be appended to the icon element's class attribute.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          { text: "Home", icon: "home", iconClass: "my-home-icon", content: "Home content" },
          { text: "Settings", icon: "gear", iconClass: "my-settings-icon", content: "Settings content" }
        ]
    });
</script>

dataSource.iconPosition

String

Sets the position of the icon relative to the tab text. Possible values are before and after.

Default: "before"

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataIconField: "icon",
        dataIconPositionField: "iconPosition",
        dataSource: [
          { text: "Home", icon: "home", iconPosition: "before", content: "Home content" },
          { text: "Settings", icon: "gear", iconPosition: "after", content: "Settings content" }
        ]
    });
</script>

dataSource.text

String

The display text of the tab. This is the text that will be shown in the tab header.

Default: ""

<div id="tabstrip"></div>
<script>
    $("#tabstrip").kendoTabStrip({
        dataTextField: "text",
        dataContentField: "content",
        dataSource: [
          { text: "Tab 1", content: "Tab 1 content" },
          { text: "Tab 2", content: "Tab 2 content" }
        ]
    });
</script>

Related Members