KendoReact Smart DataGrid
Premium

The KendoReact Smart Grid enhances the traditional data grid with AI-powered capabilities that make data exploration more intuitive and efficient. By leveraging artificial intelligence, the Smart Grid can automatically analyze data patterns, suggest relevant operations, and provide intelligent insights to help users discover meaningful information faster.

ninja-iconThe Smart Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

Basics of Smart Features in the KendoReact Data Grid

The Smart Grid functionality is enabled through AI-powered components that integrate seamlessly with the traditional Grid features. When Smart features are enabled, users can interact with data using natural language commands and receive intelligent suggestions for data operations.

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.

Features of Smart Grid

  • Basic Operations—Perform filtering, sorting, and grouping operations using natural language prompts.
  • Smart Grid AI-Powered Highlighting—Visually identify data patterns and outliers without applying traditional filters.
  • AI Custom Column—Add AI-powered insights for individual grid rows with personalized recommendations.
  • Intelligent Data Analysis—Automatically analyzes your dataset to identify patterns and suggest relevant filtering, sorting, and grouping operations.
  • Smart Recommendations—Provides context-aware suggestions based on data types, user behavior, and common data analysis patterns.
  • Custom AI Integration—Flexible architecture that supports integration with your own AI services and domain-specific logic.

Using the KendoReact Smart Features

To enable Smart Grid functionality in the KendoReact Grid and utilize its built-in state management, follow these steps:

  1. Enable the autoProcessData prop to allow the Grid to handle the updated state automatically.
  2. Configure the Smart Grid components with your AI service endpoint.
  3. Set up the AI-powered toolbar tools and column assistants as needed.

The following example demonstrates how to use Smart Grid with built-in state management of the KendoReact Grid.

Change Theme
Theme
Loading ...

By default, the GridToolbarAIAssistant component doesn't keep the prompt history and results returned by the AI model. To maintain conversation history, you need to implement custom logic using the outputs prop, as demonstrated in the Smart Grid Basic Operations and other detailed implementation examples throughout the Smart Grid documentation.