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

StartButton

configuration

When configured, a start button will be rendered in the left side of the header section of the ActionSheet. Typically used for navigation or back functionality. The button is only visible when title is also specified.

startButton

Object

Default: false

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title: 'Select item',
      startButton: {
          icon: "chevron-left",
          click: function(e) {
              console.log("Start button clicked");
          }
      },
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          }
      ]
  }).data('kendoActionSheet');

  actionsheet.open();
  function onClick(e) {
      e.preventDefault();
  }
</script>

startButton.click

Function

The function that will be executed when the start button is clicked.

<div id="actionsheet"></div>
<script>
$("#actionsheet").kendoActionSheet({
    title: "Select action",
    items: [
        { text: "Item 1", icon: "folder" },
        { text: "Item 2", icon: "file" }
    ],
    startButton: {
        text: "Start",
        click: function(e) {
            console.log("Start button clicked");
        }
    }
}).data("kendoActionSheet").open();
</script>

startButton.icon

String

Specifies the icon to be displayed in the start button.

<div id="actionsheet"></div>
<script>
$("#actionsheet").kendoActionSheet({
    title: "Select action",
    items: [
        { text: "Item 1", icon: "folder" },
        { text: "Item 2", icon: "file" }
    ],
    startButton: {
        text: "Start",
        icon: "play"
    }
}).data("kendoActionSheet").open();
</script>