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

Items

configuration

A JavaScript array that contains the ActionSheet's items configuration.

items

Array

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.click

Function

Specifies the click event handler of the item.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.description

String

Specifies the description of the item.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick,
              description: "Select to enter edit mode."
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.disabled

Boolean

If set to true, the item will be disabled.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick,
              description: "Select to enter edit mode.",
              disabled: true
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.group

String

Specifies the group of the item. Items can be segregated in two groups - top and bottom.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.icon

String

Specifies the icon's name of the item.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.iconClass

String

Specifies the icon's class of the item.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              iconClass: 'custom-edit-class',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.iconColor

String

The icon color. Available options are inherit, default, primary, secondary, tertiary, info, success, warning, error, inverted or any hexadecimal value.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              iconColor: "info",
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.iconSize

Number

The icon size in pixels.

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              iconColor: "info",
              iconSize: 40,
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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

items.text

String

Specifies the main text of the item

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

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