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

Ai.aiAssistant.outputActions

configuration

An array of action configurations for the output cards in the AI Assistant.

ai.aiAssistant.outputActions

Array

Default: ["copy", "retry"]

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       outputActions: [
         "copy",
         "retry",
         "rating",
         { command: "export", text: "Export", icon: "download" },
         { command: "share", text: "Share", icon: "share" }
       ]
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.outputActions.command

String

The command identifier for the action.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      outputActions: [
        {
          command: "copyOutput",
          text: "Copy",
          icon: "copy"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.fillMode

String

Specifies the fill mode of the action button. 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: {
      outputActions: [
        {
          command: "save",
          text: "Save",
          fillMode: "outline"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.icon

String

The icon name for the action button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      outputActions: [
        {
          command: "share",
          text: "Share",
          icon: "share"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.rounded

String

Specifies the border radius of the action button. 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: {
      outputActions: [
        {
          command: "refresh",
          text: "Refresh",
          rounded: "large"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.text

String

The text displayed on the action button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      outputActions: [
        {
          command: "export",
          text: "Export Results",
          icon: "download"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.themeColor

String

Specifies the theme color of the action button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      outputActions: [
        {
          command: "approve",
          text: "Approve",
          themeColor: "success"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.title

String

Specifies the title attribute (tooltip) for the action button.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      outputActions: [
        {
          command: "help",
          text: "Help",
          title: "Get help about this output"
        }
      ]
    }
  }
});
</script>

ai.aiAssistant.outputActions.type

String

Specifies the type of the action. 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: {
      outputActions: [
        {
          command: "action1",
          text: "Action 1",
          type: "button"
        },
        {
          type: "spacer"
        },
        {
          command: "action2",
          text: "Action 2",
          type: "button"
        }
      ]
    }
  }
});
</script>