New to Kendo UI for jQueryStart a free 30-day trial

Ai

configuration

Defines the configuration options for the AI tools in the Grid.

ai

Object
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   toolbar: ["aiAssistant"],
   filterable: true,
   columnMenu: {
     componentType: "modern"
   },
   ai: {
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   },
   height: 550
});
</script>

Defines the configuration options for the AI Assistant tool in the Grid.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "ProductName" },
     { field: "UnitPrice" },
     { field: "UnitsInStock" }
   ],
   dataSource: {
     transport: {
       read: {
         url: "https://demos.telerik.com/service/v2/core/detailproducts",
       },
     },
     pageSize: 5
   },
   sortable: true,
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptSuggestions: ["Show me the most expensive products",],
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

Defines the configuration options for the AI AssistantWindow in the Grid.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "productName" }, { field: "unitPrice" }],
   dataSource: [{ productName: "Coffee", unitPrice: 12.99 }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistantWindow: {
       promptRequestCancel: (e) => {
        console.log("Request canceled!");
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

Configures if the AI Assistant Window should remain visible after the response.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     autoClose: false,
     service: {
       url: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
       outputGetter: function(response) {
         return response.messages.join("---");
       }
     }
   }
});
</script>

Configures if the AI Assistant output should be cleared after closing.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     autoClose: true,
     keepOutputHistory: false,
     service: {
       url: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
       outputGetter: function(response) {
         return response.messages.join("---");
       }
     }
   }
});
</script>
String|Object

The URL or the configuration of the AI service to use for generating outputs.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>