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

SmartBox

configuration

Defines the configuration options for the SmartBox tool in the Grid. The SmartBox provides a unified interface for search, semantic search, and AI assistant capabilities.

smartBox

Object

<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/products"
      }
    },
    pageSize: 10
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "Search",
    placeholder: "Search or ask AI...",
    searchSettings: {
      enabled: true
    }
  }
});
</script>

smartBox.activeMode

String

The mode which will be initially selected when the SmartBox popup is opened. If not provided, defaults to the first enabled mode. The available modes are:

"Search" - Standard text-based search mode.
"SemanticSearch" - AI-powered semantic search mode.
"AIAssistant" - AI assistant mode for natural language queries.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    }
  }
});
</script>

smartBox.aiAssistantCancelRequest

Fired when the user cancels an ongoing AI request in AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    },
    aiAssistantCancelRequest: function(e) {
      console.log("AI request cancelled");
    }
  }
});
</script>

smartBox.aiAssistantPromptRequest

Fired before the SmartBox sends a prompt request to the AI service in AI Assistant mode. Calling e.preventDefault() will prevent the request from being sent.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    },
    aiAssistantPromptRequest: function(e) {
      console.log("Prompt:", e.prompt);
    }
  }
});
</script>

smartBox.aiAssistantResponseError

Fired when the AI service returns an error in AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    },
    aiAssistantResponseError: function(e) {
      console.log("AI Error:", e.error);
    }
  }
});
</script>

smartBox.aiAssistantResponseSuccess

Fired when the AI service returns a successful response in AI Assistant mode. Calling e.preventDefault() will prevent the default response handling.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
    },
    aiAssistantResponseSuccess: function(e) {
      console.log("AI Response:", e.response);
    }
  }
});
</script>

smartBox.aiAssistantSettings

Object

Configures the initial settings for the AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    activeMode: "AIAssistant",
    aiAssistantSettings: {
      enabled: true,
      service: "https://demos.telerik.com/service/v2/ai/grid/smart-state",
      promptSuggestions: ["Show top products", "Calculate average price"]
    }
  }
});
</script>

smartBox.blur

Fired when the SmartBox input loses focus.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    blur: function(e) {
      console.log("SmartBox lost focus");
    }
  }
});
</script>

smartBox.close

Fired when the SmartBox popup closes.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    close: function(e) {
      console.log("SmartBox popup closed");
    }
  }
});
</script>

smartBox.focus

Fired when the SmartBox input receives focus.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    focus: function(e) {
      console.log("SmartBox focused");
    }
  }
});
</script>

smartBox.history

Boolean|Object

Sets the settings for the history queries of all modes. When set to true, enables history with default settings. Can be set to an object to customize the history behavior.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    history: true
  }
});
</script>

smartBox.historyItemTemplate

Function

Represents the template for a history query in the SmartBox component.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    history: true,
    historyItemTemplate: (dataItem) => `<div class="history-item"><span class="query">${dataItem.query}</span><span class="time">${kendo.toString(dataItem.timestamp, dataItem.timestampFormat)}</span></div>`
  }
});
</script>

smartBox.open

Fired when the SmartBox popup opens.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    open: function(e) {
      console.log("SmartBox popup opened");
    }
  }
});
</script>

smartBox.placeholder

String

The unified placeholder text of the SmartBox input independent of the activated mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    placeholder: "Search products or ask a question..."
  }
});
</script>

smartBox.search

Fired when the user performs a search in the SmartBox Search mode. Calling e.preventDefault() will prevent the default search behavior.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    search: function(e) {
      console.log("Search value:", e.searchValue);
    }
  }
});
</script>

smartBox.searchSettings

Object

Configures the initial settings for the Search mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      enabled: true,
      placeholder: "Search products...",
      delay: 500
    }
  }
});
</script>

smartBox.semanticSearch

Fired when the user performs a search in the SmartBox Semantic Search mode. Use this event to handle semantic search requests with your AI service.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    semanticSearchSettings: {
      enabled: true
    },
    semanticSearch: function(e) {
      console.log("Semantic search value:", e.searchValue);
    }
  }
});
</script>

smartBox.semanticSearchSettings

Object

Configures the initial settings for the Semantic Search mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    semanticSearchSettings: {
      enabled: true,
      placeholder: "Describe what you're looking for..."
    }
  }
});
</script>

smartBox.suggestionTemplate

Function

Represents the template for a suggestion in the SmartBox component AI Assistant mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    suggestionTemplate: (dataItem) => `<span class="suggestion-item">${dataItem.suggestion}</span>`,
    aiAssistantSettings: {
      enabled: true,
      promptSuggestions: ["Show top products", "Calculate average price"]
    }
  }
});
</script>

Related Members