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

Ai.aiAssistant.toolbarItems

configuration

An array of toolbar items to display in the AI Assistant header toolbar.

ai.aiAssistant.toolbarItems

Array

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       toolbarItems: [
         { type: "spacer" },
         {
           type: "button",
           icon: "gear",
           fillMode: "flat",
           rounded: "full",
           click: function(e) {
             console.log("Settings clicked");
           }
         },
         {
           type: "button",
           icon: "x",
           fillMode: "flat",
           rounded: "full",
           themeColor: "primary",
           click: function(e) {
             console.log("X clicked");
           }
         }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.toolbarItems.click

Function

The click event handler of the toolbar item.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          text: "Custom Action",
          click: function(e) {
            alert("Custom toolbar item clicked!");
          }
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.toolbarItems.fillMode

String

The fill mode of the toolbar item. Available options: "solid", "outline", "flat", "none".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          text: "Action",
          fillMode: "outline"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.toolbarItems.icon

String

The icon name of the toolbar item.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          icon: "gear",
          text: "Settings"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.toolbarItems.rounded

String

The rounded mode of the toolbar item. Available options: "small", "medium", "large", "full", "none".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          text: "Action",
          rounded: "large"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.toolbarItems.themeColor

String

The theme color of the toolbar item.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          text: "Primary Action",
          themeColor: "primary"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.toolbarItems.type

String

The type of the toolbar item. Available options: "button", "spacer".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      toolbarItems: [
        {
          type: "button",
          text: "Custom Action"
        },
        {
          type: "spacer"
        }
      ]
    }
  }
});
</script>