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

Ai.aiAssistantWindow

configuration

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

ai.aiAssistantWindow

Object

<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>

ai.aiAssistantWindow.actions

Array

The buttons for interacting with the AI AssistantWindow.

The predefined array values are:

Close
Refresh
Minimize
Maximize
Pin

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

ai.aiAssistantWindow.activate

Triggered when a AI Assistant Window has finished its opening animation.

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

ai.aiAssistantWindow.animation

Boolean|Object

A collection of {Animation} objects that is used to change the default animations for the AI AssistantWindow. When set to false, all animations will be disabled.

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

ai.aiAssistantWindow.appendTo

Object|String

The element to which the AI AssistantWindow will be appended.

Default: document.body

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

ai.aiAssistantWindow.autoFocus

Boolean

Determines whether the AI AssistantWindow will be focused automatically when opened.

Default: true

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

ai.aiAssistantWindow.close

Triggered when a AI Assistant Window is closed either by the user or through the close() method.

Event Data

e.userTriggered `Boolean`

Indicates whether the close action was triggered by the user either by clicking the Close button or by pressing Esc. When the close method was called, this field is false.

e.preventDefault `Function`

If invoked prevents the Window from closing.

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

ai.aiAssistantWindow.content

Specifies a URL or request options from where the AI Assistant Window will load its content.

For URLs which start with a protocol (for example, http://), a container iframe element is automatically created. As this behavior may change in future versions, try to always use the iframe configuration option.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistantWindow: {
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html",
        dataType: "html"
      }
    }
  }
});
</script>

ai.aiAssistantWindow.deactivate

Triggered when a AI Assistant Window has finished its closing animation.

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

ai.aiAssistantWindow.dragend

Triggered when a AI Assistant Window has been moved by the user.

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

ai.aiAssistantWindow.draggable

Object|Boolean

Enables (true) or disables (false) the dragging of the AI AssistantWindow.

Default: true

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

ai.aiAssistantWindow.dragstart

Triggered when a AI Assistant Window has been moved by the user.

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

ai.aiAssistantWindow.error

Triggered when an Ajax request for content fails.

Event Data

e.xhr `jqXHR`

The XHR request object as returned from jQuery.ajax.

e.status `String`

The status of the request as returned from jQuery.ajax.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistantWindow: {
        error: () => console.log("AI Assistant Window error!")
     },
   }
});
</script>

ai.aiAssistantWindow.height

Number | String

Specifies the height of the AI AssistantWindow.

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

ai.aiAssistantWindow.maxHeight

Number

The maximum height (in pixels) that may be achieved by resizing the AI AssistantWindow.

Default: Infinity

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

ai.aiAssistantWindow.maxWidth

Number

The maximum width (in pixels) that may be achieved by resizing the AI AssistantWindow.

Default: Infinity

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

ai.aiAssistantWindow.maximize

Triggered when the user maximizes the AI Assistant Window.

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

ai.aiAssistantWindow.minHeight

Number

The minimum height (in pixels) that may be achieved by resizing the AI AssistantWindow.

Default: 50

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

ai.aiAssistantWindow.minWidth

Number

The minimum width (in pixels) that may be achieved by resizing the AI AssistantWindow.

Default: 50

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

ai.aiAssistantWindow.minimize

Triggered when the user minimizes the AI Assistant Window.

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

ai.aiAssistantWindow.modal

Boolean|Object

Specifies whether the AI AssistantWindow will display a modal overlay over the page.

Default: false

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

ai.aiAssistantWindow.open

Triggered when a AI Assistant Window is opened, that is, when the open() method is called.

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

ai.aiAssistantWindow.pinned

Boolean

Specifies whether the AI AssistantWindow will be pinned, that is, that it will not move together with the page content during scrolling.

Default: false

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

ai.aiAssistantWindow.position

Object

A collection of one or two members which define the initial top and/or left position of the AI AssistantWindow.

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

Triggered when the content of a AI Assistant Window has finished loading via Ajax, when the Window iframe has finished loading, or when the Refresh button has been clicked on a Window with static content.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistantWindow: {
        actions: ["Refresh"],
        refresh: () => console.log("AI Assistant Window refresh!")
     },
   }
});
</script>

ai.aiAssistantWindow.resizable

Boolean

Enables (true) or disables (false) the resizing of the AI AssistantWindow.

Default: true

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

ai.aiAssistantWindow.resize

Triggered when the user resizes the AI Assistant Window.

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

ai.aiAssistantWindow.restore

Triggered when the AI Assistant Window is restored to its previous state(maximized or minimized) by pressing the restore button, or when the restore() method is called.

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

ai.aiAssistantWindow.scrollable

Boolean

Enables (true) or disables (false) the scrolling of the AI AssistantWindow contents.

Default: true

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

ai.aiAssistantWindow.size

String

Sets a predefined size to the AI AssistantWindow. The width and height configuration options override the predefined size.

The supported values are:

auto
small
medium
large

Default: "auto"

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

ai.aiAssistantWindow.title

Object|String|Boolean

The text in the title bar of the AI AssistantWindow. If set to false, the AI AssistantWindow will be displayed without a title bar.

Default: "AI Assistant"

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

ai.aiAssistantWindow.visible

Boolean

Specifies whether the AI AssistantWindow will be initially visible.

Default: false

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

ai.aiAssistantWindow.width

Number | String

Specifies the width of the AI AssistantWindow.

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

Related Members