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

Ai.aiAssistant.views

configuration

An array of view configurations for the AI Assistant.

ai.aiAssistant.views

Array

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       views: [
         {
           type: "prompt",
           name: "ask",
           buttonText: "Ask AI",
           buttonIcon: "comment"
         },
         {
           type: "output",
           name: "results",
           buttonText: "Results",
           buttonIcon: "chart-line"
         },
         {
           type: "custom",
           name: "insights",
           buttonText: "Insights",
           buttonIcon: "light-bulb",
           viewTemplate: "<div>Custom insights view for grid data</div>"
         }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.views.buttonIcon

String

The icon name of the toolbar button rendered for the view.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "charts",
          buttonText: "Charts",
          buttonIcon: "chart-line"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.buttonText

String

The text of the toolbar button rendered for the view.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "analytics",
          buttonText: "Analytics View"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.footerTemplate

String|Function

The template of the view footer.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "report",
          buttonText: "Report",
          viewTemplate: "<div>Report content</div>",
          footerTemplate: "<div class='footer'>Generated at: #{new Date()}</div>"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.initializeComponents

Function

A function executed when the view is rendered to initialize components.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "dashboard",
          buttonText: "Dashboard",
          viewTemplate: "<div id='dashboard-content'></div>",
          initializeComponents: function(container) {
            container.find("#dashboard-content").html("Dashboard initialized!");
          }
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.name

String

The name of the view. Must be unique.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "dataInsights",
          buttonText: "Insights"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.promptCommands

Array

The commands to display in the prompt view.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "prompt",
          name: "customPrompt",
          buttonText: "Custom Prompts",
          promptCommands: [
            {
              id: "analyze",
              text: "Analyze Data",
              icon: "chart"
            }
          ]
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.type

String

The type of the view. Available options: "prompt", "output", "commands", "custom".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "commands",
          name: "customCommands",
          buttonText: "Commands"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.views.viewTemplate

String|Function

The template of the view content.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      views: [
        {
          type: "custom",
          name: "summary",
          buttonText: "Summary",
          viewTemplate: "<div class='summary-view'><h3>Data Summary</h3><p>View data insights here.</p></div>"
        }
      ]
    }
  }
});
</script>

Related Members