Implementing Syncfusion MAUI Smart DataGrid
A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI Smart DataGrid (SfSmartDataGrid) control. The Smart DataGrid combines traditional tabular data display with AI-powered natural language capabilities, enabling users to perform complex operations like sorting, filtering, grouping, and highlighting using simple text commands. It displays and manipulates data in a tabular format with advanced support for intelligent data operations, AI-assisted features, customizable assistant views, and event-driven architecture.
When to Use This Skill
Use this skill when you need to:
- Add a Smart DataGrid to .NET MAUI applications that requires AI-assisted data operations
- Enable natural language commands for users to sort, filter, group, and highlight data without coding
- Configure Azure OpenAI or other AI providers to power intelligent grid operations
- Customize the AssistView UI with templates and styling for appearance customization
- Implement AI-powered features like intelligent sorting with multi-column support and advanced filtering
- Manage grid operations programmatically using methods like
GetResponseAsync() and events
- Style toolbar, buttons, and assistant views to match application design requirements
Component Overview
The SfSmartDataGrid (Syncfusion .NET MAUI Smart DataGrid) is an advanced data grid control that combines traditional grid functionality with AI-powered natural language processing. Users can interact with data using simple text commands instead of manual UI navigation.
Key Capabilities:
- AI-Assisted Operations: Sort, filter, group, and highlight data using natural language prompts
- Multi-Column Operations: Apply complex operations in a single command (e.g., sort by multiple columns)
- Customizable AssistView: Configure suggestions, prompts, and initial commands
- Flexible Styling: Customize toolbar, buttons, and assistant view appearance with templates
- Event-Driven Architecture: Handle requests, opening, and closing events for AI operations
- AI Service Integration: Configure Azure OpenAI, Gemini, DeepSeek, or Groq services
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Install Syncfusion.Maui.SmartComponents NuGet package
- Register handlers in MauiProgram.cs
- Configure Azure AI service with credentials
- Create basic Smart DataGrid with data binding
- Add OrderInfo data model and repository
- Enable AI-assisted operations
- Running and testing the application
AI-Powered Features
📄 Read: references/ai-powered-features.md
- Natural language sorting (single and multi-column)
- Intelligent grouping with hierarchical support
- Advanced filtering with conditions (AND/OR logic)
- Highlighting rows and cells with custom colors
- Clearing operations (sort, filter, group, highlight)
- Example prompts and practical use cases
Customization and Configuration
📄 Read: references/customization.md
- Set SuggestedPrompts for predefined suggestions
- Configure Prompt for auto-execution on startup
- Enable/disable smart actions with EnableSmartActions
- Show AssistView programmatically with ShowAssistView()
- Apply AI operations dynamically using GetResponseAsync()
- Handle AssistViewRequest events
- Manage AssistViewOpening and AssistViewClosing events
Appearance and Styling
📄 Read: references/appearance-styling.md
- Style toolbar with background, stroke, and thickness
- Create custom toolbar layout with ToolbarTemplate
- Configure AssistButton appearance and icon color
- Define custom AssistButton and icon templates
- Customize AssistView popup, header, and colors
- Create AssistView header, banner, and editor templates
- Styling SmartAssistStyle properties
AI Service Configuration
📄 Read: references/ai-service-configuration.md
- Configure Azure OpenAI service setup
- Register ConfigureSyncfusionAIServices()
- Set API key, endpoint, and deployment name
- AI service requirements and prerequisites
- Supporting alternative AI providers
- Troubleshooting AI service connectivity
Configure Chat Client
📄 Read: references/configure-chat-client.md
- Configure Microsoft.Extensions.AI-compatible chat clients
- Azure OpenAI setup and configuration
- OpenAI API integration with model selection
- Self-hosted Ollama configuration and benefits
- Environment-specific configuration with appsettings.json
- Using environment variables for credentials
- Troubleshooting authentication and connection errors
Custom AI Service Integration
📄 Read: references/custom-ai-service.md
- Implement custom AI services using IChatInferenceService interface
- Create AI service class and inference service wrapper
- Register custom services in MauiProgram.cs
- Complete custom implementation example
- Testing custom integration
- Best practices for error handling and logging
- Troubleshooting response generation and performance
Claude AI Integration
📄 Read: references/claude-service.md
- Create Anthropic Claude account and get API key
- Implement ClaudeAIService and ClaudeInferenceService
- Register Claude service in MauiProgram.cs
- Available Claude models and capabilities
Google Gemini Integration
📄 Read: references/gemini-service.md
- Get Google AI Studio API key for Gemini
- Implement GeminiService and GeminiInferenceService
- Configure Gemini models and generation settings
- Register Gemini service in MauiProgram.cs
Groq AI Integration
📄 Read: references/groq-service.md
- Set up Groq console and API key
- Implement GroqService and GroqInferenceService
- Configure Groq models with OpenAI-compatible endpoint
- Register Groq service in MauiProgram.cs
DeepSeek AI Integration
📄 Read: references/deepseek-service.md
- Set up DeepSeek platform and API key
- Implement DeepSeekAIService and DeepSeekInferenceService
- Configure DeepSeek models and temperature settings
- Register DeepSeek service in MauiProgram.cs
1---
2name: syncfusion-maui-smart-datagrid
3description: Implements Syncfusion .NET MAUI Smart DataGrid (SfSmartDataGrid) with AI-powered features. Use when working with SfSmartDataGrid, AI-powered grid operations, natural language data commands, AI sorting, AI filtering, or conversational grid interaction. Covers Azure OpenAI grid integration and natural language commands for grids.
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7---
8
9# Implementing Syncfusion MAUI Smart DataGrid
10
11A comprehensive skill for implementing and customizing the Syncfusion .NET MAUI Smart DataGrid (SfSmartDataGrid) control. The Smart DataGrid combines traditional tabular data display with AI-powered natural language capabilities, enabling users to perform complex operations like sorting, filtering, grouping, and highlighting using simple text commands. It displays and manipulates data in a tabular format with advanced support for intelligent data operations, AI-assisted features, customizable assistant views, and event-driven architecture.
12
13## When to Use This Skill
14
15Use this skill when you need to:
16
17- **Add a Smart DataGrid to .NET MAUI applications** that requires AI-assisted data operations
18- **Enable natural language commands** for users to sort, filter, group, and highlight data without coding
19- **Configure Azure OpenAI or other AI providers** to power intelligent grid operations
20- **Customize the AssistView UI** with templates and styling for appearance customization
21- **Implement AI-powered features** like intelligent sorting with multi-column support and advanced filtering
22- **Manage grid operations programmatically** using methods like `GetResponseAsync()` and events
23- **Style toolbar, buttons, and assistant views** to match application design requirements
24
25## Component Overview
26
27The `SfSmartDataGrid` (Syncfusion .NET MAUI Smart DataGrid) is an advanced data grid control that combines traditional grid functionality with AI-powered natural language processing. Users can interact with data using simple text commands instead of manual UI navigation.
28
29**Key Capabilities:**
30- **AI-Assisted Operations:** Sort, filter, group, and highlight data using natural language prompts
31- **Multi-Column Operations:** Apply complex operations in a single command (e.g., sort by multiple columns)
32- **Customizable AssistView:** Configure suggestions, prompts, and initial commands
33- **Flexible Styling:** Customize toolbar, buttons, and assistant view appearance with templates
34- **Event-Driven Architecture:** Handle requests, opening, and closing events for AI operations
35- **AI Service Integration:** Configure Azure OpenAI, Gemini, DeepSeek, or Groq services
36
37## Documentation and Navigation Guide
38
39### Getting Started
40📄 **Read:** [references/getting-started.md](references/getting-started.md)
41- Install Syncfusion.Maui.SmartComponents NuGet package
42- Register handlers in MauiProgram.cs
43- Configure Azure AI service with credentials
44- Create basic Smart DataGrid with data binding
45- Add OrderInfo data model and repository
46- Enable AI-assisted operations
47- Running and testing the application
48
49### AI-Powered Features
50📄 **Read:** [references/ai-powered-features.md](references/ai-powered-features.md)
51- Natural language sorting (single and multi-column)
52- Intelligent grouping with hierarchical support
53- Advanced filtering with conditions (AND/OR logic)
54- Highlighting rows and cells with custom colors
55- Clearing operations (sort, filter, group, highlight)
56- Example prompts and practical use cases
57
58### Customization and Configuration
59📄 **Read:** [references/customization.md](references/customization.md)
60- Set SuggestedPrompts for predefined suggestions
61- Configure Prompt for auto-execution on startup
62- Enable/disable smart actions with EnableSmartActions
63- Show AssistView programmatically with ShowAssistView()
64- Apply AI operations dynamically using GetResponseAsync()
65- Handle AssistViewRequest events
66- Manage AssistViewOpening and AssistViewClosing events
67
68### Appearance and Styling
69📄 **Read:** [references/appearance-styling.md](references/appearance-styling.md)
70- Style toolbar with background, stroke, and thickness
71- Create custom toolbar layout with ToolbarTemplate
72- Configure AssistButton appearance and icon color
73- Define custom AssistButton and icon templates
74- Customize AssistView popup, header, and colors
75- Create AssistView header, banner, and editor templates
76- Styling SmartAssistStyle properties
77
78### AI Service Configuration
79📄 **Read:** [references/ai-service-configuration.md](references/ai-service-configuration.md)
80- Configure Azure OpenAI service setup
81- Register ConfigureSyncfusionAIServices()
82- Set API key, endpoint, and deployment name
83- AI service requirements and prerequisites
84- Supporting alternative AI providers
85- Troubleshooting AI service connectivity
86
87### Configure Chat Client
88📄 **Read:** [references/configure-chat-client.md](references/configure-chat-client.md)
89- Configure Microsoft.Extensions.AI-compatible chat clients
90- Azure OpenAI setup and configuration
91- OpenAI API integration with model selection
92- Self-hosted Ollama configuration and benefits
93- Environment-specific configuration with appsettings.json
94- Using environment variables for credentials
95- Troubleshooting authentication and connection errors
96
97### Custom AI Service Integration
98📄 **Read:** [references/custom-ai-service.md](references/custom-ai-service.md)
99- Implement custom AI services using IChatInferenceService interface
100- Create AI service class and inference service wrapper
101- Register custom services in MauiProgram.cs
102- Complete custom implementation example
103- Testing custom integration
104- Best practices for error handling and logging
105- Troubleshooting response generation and performance
106
107### Claude AI Integration
108📄 **Read:** [references/claude-service.md](references/claude-service.md)
109- Create Anthropic Claude account and get API key
110- Implement ClaudeAIService and ClaudeInferenceService
111- Register Claude service in MauiProgram.cs
112- Available Claude models and capabilities
113
114### Google Gemini Integration
115📄 **Read:** [references/gemini-service.md](references/gemini-service.md)
116- Get Google AI Studio API key for Gemini
117- Implement GeminiService and GeminiInferenceService
118- Configure Gemini models and generation settings
119- Register Gemini service in MauiProgram.cs
120
121### Groq AI Integration
122📄 **Read:** [references/groq-service.md](references/groq-service.md)
123- Set up Groq console and API key
124- Implement GroqService and GroqInferenceService
125- Configure Groq models with OpenAI-compatible endpoint
126- Register Groq service in MauiProgram.cs
127
128### DeepSeek AI Integration
129📄 **Read:** [references/deepseek-service.md](references/deepseek-service.md)
130- Set up DeepSeek platform and API key
131- Implement DeepSeekAIService and DeepSeekInferenceService
132- Configure DeepSeek models and temperature settings
133- Register DeepSeek service in MauiProgram.cs
134