New to KendoReact? Start a free 30-day trial

KendoReact Smart DataGrid Basic Operations
Premium

The React Grid Smart functionality enables users to perform complex data operations like filtering, sorting, and grouping through natural language prompts using the AI Toolbar Assistant. This feature makes data manipulation more intuitive by allowing users to describe what they want instead of manually configuring filters and sort options.

The Smart Grid interprets user requests and automatically applies the corresponding operations, making data exploration accessible to users regardless of their technical expertise.

The demos in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements.

Basic Operations Support

The Smart Grid supports the following basic data operations through natural language:

Filtering: "Show only failed transactions" or "Filter orders above $1000"
Sorting: "Sort by customer name ascending" or "Order by date newest first"
Grouping: "Group customers by country" or "Group orders by status"

Implementation Approaches

The Smart Grid supports different implementation approaches for handling AI-powered basic operations:

Controlled Integration

In the controlled approach, you maintain full control over the AI assistant's state and behavior while leveraging built-in AI service communication. This allows you to validate AI suggestions and apply custom business logic before executing operations.

jsx

<GridToolbarAIAssistant
    requestUrl="https://your-ai-service.com/api/grid"
    onPromptRequest={handleBeforeRequest}
    onResponseSuccess={onResponseSuccess}
/>

The following example demonstrates controlled integration for basic operations where you can intercept and validate AI responses. Because this demo showcases the controlled mode of the component, it demonstrates how to use the outputs prop along with additional logic to display the prompt output history.

Change Theme

Theme

Loading ...

Manual Integration

For complete control over the AI interaction, you can manually handle all AI service communication through the onPromptRequest event. This approach is ideal when you need custom operation logic or integration with proprietary AI systems.

jsx

<GridToolbarAIAssistant onPromptRequest={handleBeforeRequest} />

The following example demonstrates manual integration for basic operations where you have complete control over the AI interaction. Because this demo showcases the manual mode of the component, it also demonstrates how to use the outputs prop along with additional logic to display the prompt output history.