Log in
The KendoReact SmartGrid brings AI prompting capabilities to your favorite enterprise-grade component.
Working with large datasets in web applications can involve repetitive tasks, such as manually configuring filters, setting sorting rules or grouping data in multiple ways to find the information you need. While traditional data grids (like the Progress KendoReact Data Grid) provide the tools to accomplish these operations, they require users to understand the grid’s interface and manually configure each step of each operation.
What if our data grid could understand natural language commands? What if we could ask it to “show only failed transactions over $500” or “group customers by region and sort by revenue”? This is exactly what the new KendoReact SmartGrid offers.
KendoReact SmartGrid
The KendoReact SmartGrid enhances the traditional KendoReact DataGrid with AI-powered capabilities that enable users to interact with data using natural language. Instead of clicking through menus and manually configuring filters, users can describe what they want to see, and the AI assistant translates those requests into grid operations.
The SmartGrid maintains all the powerful features of the standard grid (sorting, filtering, grouping, etc.) while adding an intelligent layer that interprets user intent and automatically applies the appropriate data operations.
Let’s start with a basic implementation to see the SmartGrid in action:
import * as React from 'react';
import {
Grid,
GridColumn,
GridToolbar,
GridToolbarAIAssistant,
} from '@progress/kendo-react-grid';
import { filterIcon } from '@progress/kendo-svg-icons';
const App = () => {
const transactions = [
{
id: 1,
customerName: 'Acme Corp',
amount: 1250.0,
currency: 'USD',
status: 'Completed',
transType: 'Deposit',
transDate: new Date('2024-10-15'),
},
{
id: 2,
customerName: 'Tech Solutions',
amount: 450.0,
currency: 'EUR',
status: 'Failed',
transType: 'Withdrawal',
transDate: new Date('2024-10-16'),
},
{
id: 3,
customerName: 'Global Industries',
amount: 2100.0,
currency: 'USD',
status: 'Completed',
transType: 'Deposit',
transDate: new Date('2024-10-17'),
},
{
id: 4,
customerName: 'StartUp Inc',
amount: 850.0,
currency: 'GBP',
status: 'Pending',
transType: 'Withdrawal',
transDate: new Date('2024-10-18'),
},
{
id: 5,
customerName: 'Enterprise Co',
amount: 3200.0,
currency: 'USD',
status: 'Completed',
transType: 'Deposit',
transDate: new Date('2024-10-19'),
},
];
return (
<Grid
autoProcessData={true}
dataItemKey="id"
data={transactions}
sortable={true}
groupable={true}
pageable={true}
columnMenuIcon={filterIcon}
>
<GridToolbar>
<GridToolbarAIAssistant
requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"
promptPlaceHolder="Filter, sort or group with AI"
suggestionsList={[
'Sort by amount descending',
'Show only completed transactions',
'Group by transaction type',
'Filter where currency is USD',
]}
enableSpeechToText={true}
/>
</GridToolbar>
<GridColumn field="customerName" title="Customer Name" width={180} />
<GridColumn field="amount" title="Amount" width={120} format="{0:c2}" />
<GridColumn field="currency" title="Currency" width={100} />
<GridColumn field="status" title="Status" width={120} />
<GridColumn field="transType" title="Type" width={120} />
<GridColumn
field="transDate"
title="Date"
width={140}
format="{0:MM/dd/yyyy}"
/>
</Grid>
);
};
export default App;
In the example above, we’ve created a transaction grid using the AI-powered toolbar assistant. The GridToolbarAIAssistant component provides a natural language interface that lets users type commands like “show only completed transactions” or “sort by amount descending,” and the AI automatically applies those operations to the grid.
The autoProcessData prop is key here in the above example. It enables the grid to automatically handle state updates when AI operations are applied, eliminating the need for manual state management in simple scenarios.
The SmartGrid is part of KendoReact Premium, an enterprise-grade UI library with 120+ components. The AI features demonstrated here use a Telerik-hosted service for demonstration purposes. For production applications, you’ll want to implement your own AI service tailored to your specific domain and data requirements.
Voice Input Support
A cool feature of the SmartGrid is its support for speech-to-text input. By setting enableSpeechToText={true} on the GridToolbarAIAssistant, users can speak their commands directly instead of typing them.
To use voice input, users click the microphone icon in the AI assistant and speak their command. The grid processes spoken commands the same way as typed text, so commands like “show only completed transactions” work just as seamlessly.
The voice input feature uses the browser’s native Web Speech API, so it works across modern browsers without additional dependencies or setup.
Tracking Operations with Controlled Integration
While autoProcessData works great for simple scenarios, we may need more control over how AI operations are applied to our grid. For example, we can log user interactions, validate AI suggestions before applying them or display an operation history to users.
The controlled approach gives us this flexibility through the onResponseSuccess callback:
import * as React from 'react';
import { process } from '@progress/kendo-data-query';
import {
Grid,
GridColumn,
GridToolbar,
GridToolbarAIAssistant,
} from '@progress/kendo-react-grid';
const App = () => {
const [dataState, setDataState] = React.useState({
skip: 0,
take: 10,
sort: [],
filter: undefined,
group: [],
});
const [outputs, setOutputs] = React.useState([]);
const aiAssistantRef = React.useRef(null);
const transactions = [
{
id: 1,
customerName: 'Acme Corp',
amount: 1250.0,
status: 'Completed',
currency: 'USD',
},
{
id: 2,
customerName: 'Tech Solutions',
amount: 450.0,
status: 'Failed',
currency: 'EUR',
},
{
id: 3,
customerName: 'Global Industries',
amount: 2100.0,
status: 'Completed',
currency: 'USD',
},
{
id: 4,
customerName: 'StartUp Inc',
amount: 850.0,
status: 'Pending',
currency: 'GBP',
},
{
id: 5,
customerName: 'Enterprise Co',
amount: 3200.0,
status: 'Completed',
currency: 'USD',
},
];
const handleResponseSuccess = (response, promptMessage) => {
if (response && response.data) {
// Apply AI-suggested operations to grid state
const newState = { ...dataState };
if (response.data.sort) newState.sort = response.data.sort;
if (response.data.filter) newState.filter = response.data.filter;
if (response.data.group) newState.group = response.data.group;
setDataState(newState);
// Track the operation in history
if (response.data.messages) {
const newOutput = {
id: outputs.length + 1,
prompt: promptMessage,
responseContent: response.data.messages.join('\n'),
};
setOutputs([newOutput, ...outputs]);
}
}
aiAssistantRef.current?.hide();
};
const processedData = process(transactions, dataState);
return (
<Grid
dataItemKey="id"
data={processedData.data}
total={processedData.total}
sortable={true}
sort={dataState.sort}
onSortChange={(e) => setDataState({ ...dataState, sort: e.sort })}
filterable={true}
filter={dataState.filter}
onFilterChange={(e) => setDataState({ ...dataState, filter: e.filter })}
groupable={true}
group={dataState.group}
onGroupChange={(e) => setDataState({ ...dataState, group: e.group })}
pageable={true}
skip={dataState.skip}
take={dataState.take}
onPageChange={(e) =>
setDataState({
...dataState,
skip: e.page.skip,
take: e.page.take,
})
}
>
<GridToolbar>
<GridToolbarAIAssistant
ref={aiAssistantRef}
requestUrl="https://demos.telerik.com/service/v2/ai/grid/smart-state"
onResponseSuccess={handleResponseSuccess}
outputs={outputs}
promptPlaceHolder="Filter, sort or group with AI"
/>
</GridToolbar>
<GridColumn field="customerName" title="Customer" width={180} />
<GridColumn field="amount" title="Amount" width={120} format="{0:c2}" />
<GridColumn field="status" title="Status" width={120} />
<GridColumn field="currency" title="Currency" width={100} />
</Grid>
);
};
export default App;
In this controlled approach, we explicitly manage the grid’s state and intercept AI responses via onResponseSuccess. This allows us to:
- Validate AI suggestions before applying them to the grid.
- Log user interactions and AI operations for analytics or debugging.
- Display operation history through the
outputsprop, giving users transparency into what commands they’ve issued.
The outputs prop displays a history of AI operations, helping users understand how their natural language requests were interpreted and what operations were performed on the grid.
Wrap-up
The KendoReact SmartGrid brings AI-powered capabilities to data grids, making complex data operations accessible through natural language. By simply describing what they want to see, users can filter, sort and group data without needing to understand the intricacies of the grid interface.
For more details on implementing the SmartGrid and exploring its capabilities, check out the official documentation:
And to try it for yourself, download the 30-day free trial:
