Skip to main content Home Creators syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-grid
syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-gridThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
syncfusion-aspnetcore-blockeditor Implement Syncfusion Block Editor control in ASP.NET Core applications using Razor Tag Helpers. Use this skill when working with Syncfusion Block Editor, EJ2 BlockEditor, ASP.NET Core block-based content editing, or <ejs-blockeditor> syntax and collaborative editing features, real-time multi-user editing, Yjs integration, user presence and remote cursors, document version history. Covers block management, nested content structures, drag-and-drop functionality, content sanitization, installation, tag helper setup, block types, content manipulation, events, menus, and advanced features for creating rich block-based document editors.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-aspnetcore-grid description Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Grid"}
Syncfusion ASP.NET Core Grid
The Syncfusion ASP.NET Core Grid is a comprehensive, feature-rich component for displaying and manipulating tabular data. It provides extensive functionality for data binding, paging, sorting, filtering, grouping, editing, exporting, scrolling modes, row/column customization, and advanced state management to handle datasets of any size and complexity efficiently.
⚠️ Security & Trust Boundary
The Grid skill does not perform any remote data access.
All external API interaction is handled by a separate DataManager skill outside this skill’s trust boundary.
Table of Contents
When to Use This Skill
Use the Syncfusion ASP.NET Core Grid when you need to:
Display tabular data with rows and columns in ASP.NET Core applicationsHandle large datasets efficiently with paging, virtual scrolling, or infinite scrolling
Enable sorting, filtering, and searching for single or multiple columns
Edit data inline with multiple edit modes (Inline, Batch, Dialog)
Export data to Excel or PDF formats with customization
Group and aggregate data with summaries and calculations
Customize rows and cells with templates and styling
Manage complex column configurations (frozen columns, spanning, reordering, resizing)
Optimize performance when rendering thousands of records
Persist grid state for user preferences and configuration
Provide responsive data views for different screen sizes
Component Overview The Grid component provides:
Data Binding : Support for local collections, remote data sources, and DataManager integrationPaging : Server-side or client-side pagination with customizable page size and navigationSorting : Single and multi-column sortingFiltering : Multiple filter modes (FilterBar, FilterMenu, Excel-like filter)Searching : Global search across columnsGrouping : Group data by columns with aggregatesSelection : Row, cell, and column selection with checkbox supportEditing : Inline, Batch, and Dialog modes with validation and templatesAggregates : Sum, Average, Count, Min, Max with footer, group, and caption displayExporting : Excel and PDF export with templates and customizationScrolling : Standard, Virtual, and Infinite scrolling modesRow Customization : Templates, detail views, drag-drop, pinning, spanningColumn Customization : Templates, resizing, reordering, freezing, spanningPerformance : Optimized rendering for large datasetsResponsive Design : Adaptive layouts for different screen sizes
Mandatory Rules for Server-Side Grid Configuration CRITICAL : Follow these rules when configuring ASP.NET Core Grid for optimal performance and correctness:
Rule 1: DataManager Adaptor Configuration Adaptors determine how the Grid communicates with your server backend. Each request type (read, create, update, delete) has specific URL mapping requirements.
Adaptor Backend Use Case UrlAdaptorGeneric HTTP endpoint Simple REST APIs with standard conventions ODataAdaptorOData v4 service Microsoft ODATA, SAP services ODataV4AdaptorOData v4 (newer) Modern ODATA endpoints WebApiAdaptorASP.NET Web API ASP.NET Core API controllers GridAdaptorSyncfusion GridAdaptor Built-in Syncfusion backend conventions
Rule 2: EnablePersistence for State Management To persist grid state (sorting, filtering, grouping, paging, column order), enable persistence:
<ejs-grid id="Grid" allowPaging="true" enablePersistence="true" >
<!-- Grid configuration -->
</ejs-grid>
⚠️ Rule : enablePersistence="true" is required when using state management in grid.
Rule 3: Primary Key Configuration for Editing The isPrimaryKey="true" attribute is required on the key column — editing silently fails without it.
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" ></e-grid-column>
Feature/Skill Navigation Guide
Getting Started & Setup
NuGet package installation
Tag helper registration
CSS and script setup
Basic grid initialization
Data binding fundamentals
Data Binding
Local data binding (IEnumerable, List, DataTable)
Remote data with DataManager (OData, WebAPI)
Loading indicators
Dynamic data refresh
Column Configuration
Column definition and properties
Column types (string, number, date, boolean, checkbox)
Column width and formatting
Column templates and custom rendering
Column features (spanning, reordering, resizing)
Foreign key columns
Stacked headers
Data Aggregation
Footer aggregates (Sum, Avg, Count, Min, Max)
Group footer aggregates
Group caption aggregates
Custom aggregate functions
Reactive aggregate updates
Navigation & Pagination
Enable and configure paging
Page size configuration
Navigation and page change
External paging
Sorting Data
Enable sorting (single and multi-column)
Initial sort configuration
Custom sort comparers
Sort events
Filtering
Searching
Grid search functionality
Global search across columns
Search configuration
Grouping Data
Enable grouping by columns
Group by multiple columns
Caption templates
Group footer aggregates
Lazy-load grouping
Selection
Row, cell, and column selection modes
Checkbox selection
Multiple selection handling
Selection events
Editing
Enable editing (allowEditing, allowAdding, allowDeleting)
Edit modes: Inline, Batch, Dialog
Edit triggers (double-click, toolbar)
Custom edit templates
Validation rules
Server-side data persistence
Row Features
Row templates
Detail templates (expand/collapse)
Row drag and drop
Row pinning
Row spanning
Toolbar
Built-in toolbar items
Custom toolbar buttons
Toolbar events
Exporting to Excel
Excel export setup
Export options and customization
Export with templates
Server-side export
Exporting to PDF
PDF export setup
Headers and footers
Export options and customization
Export with templates
Server-side export
Printing
Print grid
Print templates
Print customization
Styling & Appearance
CSS customization
Themes and dark mode
Inline styling and classes
Custom color schemes
Freezing & Pinning
Freeze columns
Freeze rows
Row pinning
Frozen column behavior
Scrolling Modes
Standard scrolling
Virtual scrolling (performance optimization)
Infinite scrolling
Scrollbar and height configuration
Hierarchy & Nested Data
Parent-child data structures
Child grid configuration
Expand and collapse behavior
Detail row templates
Lazy loading child data
Context Menu
Built-in context menu items
Custom context menus
Context menu events
Cell Features
Cell templates
Cell customization via events
Custom cell attributes
Cell tooltips
Clipboard Operations
Copy and paste functionality
Copy with headers
Custom separators
Configuration Management
Global grid settings
Local column configuration
State Management
Persist grid state
Save and restore state
Local storage
⚠️ Rule : enablePersistence="true" must be enabled when using state management in grid.
Data Validation
Built-in validation rules
Custom validation logic
Dynamic validation
Server-side validation
Error handling
Command Column & Row Actions
Built-in commands (Edit, Delete, Save, Cancel)
Custom command buttons
Role-based and status-based commands
Command click events
Conditional command visibility
CSS styling and icons
Localization & Internationalization
Multi-language support (60+ languages)
Locale setup and culture configuration
Number, date, and currency formatting
RTL support (Arabic, Hebrew, Farsi)
Custom localization and translation
Language switcher implementation
Responsive Design & Mobile
Enable adaptive UI for mobile
Full-screen dialogs for filtering/editing
Mobile-optimized layouts
Responsive grid layouts
Column visibility on mobile
Touch-friendly interactions
Mobile breakpoints
API Reference & Properties
All configurable properties organized by category
Quick reference table for quick lookup
When to use each property
Configuration requirements
Programmatic Control (Methods)
Grid methods by category (data, row, column, sort, filter, group, page, edit, export)
Method signatures and parameters
Return values and usage patterns
Server-side method invocation
Event Communication (Events)
All Grid events with timing and use cases
ActionBegin event for canceling or mutating actions
ActionComplete event for reactive operations
ActionFailure event for error handling
Using args.requestType to identify the action
Data Connectivity & Adaptors
5+ adaptor types for backend integration
UrlAdaptor, ODataV4Adaptor, WebApiAdaptor
Custom adaptors and RemoteSaveAdaptor
Backend configuration examples (C#, Node.js)
Request/response format specifications
Error handling and adaptor comparison
Performance Optimization
Virtual scrolling for 10,000+ records
Infinite scrolling and progressive loading
Memory management and cleanup strategies
Bundle size optimization
Event debouncing and throttling
Performance benchmarking
Accessibility & Compliance
WCAG 2.2 and Section 508 compliance
WAI-ARIA implementation and screen readers
Keyboard navigation (Tab, arrows, Enter, Escape)
Color contrast and focus management
Accessibility testing tools
Semantic HTML practices
Quick Start Example @* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2
@* ~/Pages/Index.cshtml *@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowSorting="true" allowFiltering="true">
<e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120" textAlign="Right"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index ()return View();
}
