syncfusion-aspnetcore-grid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

Syncfusion ASP.NET Core Grid是一个功能全面、特性丰富的组件，用于展示和操作表格数据。它提供了广泛的功能，包括数据绑定、分页、排序、筛选、分组、编辑、导出、滚动模式、行/列自定义以及高级状态管理，能够高效处理任意规模和复杂度的数据集。

⚠️ 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.

该Grid技能不执行任何远程数据访问。
所有外部API交互由该技能信任边界之外的独立DataManager技能处理。

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 applications
Handle 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

在以下场景中使用Syncfusion ASP.NET Core Grid：

在ASP.NET Core应用中展示表格数据（行和列形式）
高效处理大型数据集，支持分页、虚拟滚动或无限滚动
启用单列或多列的排序、筛选和搜索功能
以内联方式编辑数据，支持多种编辑模式（Inline、Batch、Dialog）
将数据导出为Excel或PDF格式，并支持自定义配置
对数据进行分组和聚合，包含汇总和计算功能
通过模板和样式自定义行和单元格
管理复杂的列配置（冻结列、列合并、列重排、列调整大小）
优化性能，渲染数千条记录
持久化网格状态，保存用户偏好和配置
提供适配不同屏幕尺寸的响应式数据视图

Component Overview

组件概述

The Grid component provides:

Data Binding: Support for local collections, remote data sources, and DataManager integration
Paging: Server-side or client-side pagination with customizable page size and navigation
Sorting: Single and multi-column sorting
Filtering: Multiple filter modes (FilterBar, FilterMenu, Excel-like filter)
Searching: Global search across columns
Grouping: Group data by columns with aggregates
Selection: Row, cell, and column selection with checkbox support
Editing: Inline, Batch, and Dialog modes with validation and templates
Aggregates: Sum, Average, Count, Min, Max with footer, group, and caption display
Exporting: Excel and PDF export with templates and customization
Scrolling: Standard, Virtual, and Infinite scrolling modes
Row Customization: Templates, detail views, drag-drop, pinning, spanning
Column Customization: Templates, resizing, reordering, freezing, spanning
Performance: Optimized rendering for large datasets
Responsive Design: Adaptive layouts for different screen sizes

Grid组件提供以下功能：

数据绑定：支持本地集合、远程数据源以及与DataManager集成
分页：服务端或客户端分页，支持自定义页面大小和导航
排序：单列和多列排序
筛选：多种筛选模式（FilterBar、FilterMenu类Excel筛选）
搜索：跨列全局搜索
分组：按列分组数据并支持聚合
选择：行、单元格和列选择，支持复选框
编辑：Inline、Batch和Dialog模式，支持验证和模板
聚合：求和、平均值、计数、最小值、最大值，支持页脚、分组页脚和标题显示
导出：Excel和PDF导出，支持模板和自定义配置
滚动：标准滚动、虚拟滚动和无限滚动模式
行自定义：模板、详情视图、拖拽、固定、合并
列自定义：模板、调整大小、重排、冻结、合并
性能：针对大型数据集优化渲染
响应式设计：适配不同屏幕尺寸的布局

Mandatory Rules for Server-Side Grid Configuration

服务端Grid配置的强制规则

CRITICAL: Follow these rules when configuring ASP.NET Core Grid for optimal performance and correctness:

关键提示：配置ASP.NET Core Grid时，请遵循以下规则以确保最佳性能和正确性：

Rule 1: DataManager Adaptor Configuration

规则1：DataManager适配器配置

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
`UrlAdaptor`	Generic HTTP endpoint	Simple REST APIs with standard conventions
`ODataAdaptor`	OData v4 service	Microsoft ODATA, SAP services
`ODataV4Adaptor`	OData v4 (newer)	Modern ODATA endpoints
`WebApiAdaptor`	ASP.NET Web API	ASP.NET Core API controllers
`GridAdaptor`	Syncfusion GridAdaptor	Built-in Syncfusion backend conventions

📄 Full Adaptor Reference: references/adaptors.md

适配器决定Grid如何与服务器后端通信。每种请求类型（读取、创建、更新、删除）都有特定的URL映射要求。

适配器	后端	使用场景
`UrlAdaptor`	通用HTTP端点	遵循标准约定的简单REST API
`ODataAdaptor`	OData v4服务	Microsoft ODATA、SAP服务
`ODataV4Adaptor`	OData v4（新版）	现代ODATA端点
`WebApiAdaptor`	ASP.NET Web API	ASP.NET Core API控制器
`GridAdaptor`	Syncfusion GridAdaptor	Syncfusion内置后端约定

📄 完整适配器参考文档：references/adaptors.md

Rule 2: EnablePersistence for State Management

规则2：启用持久化以管理状态

To persist grid state (sorting, filtering, grouping, paging, column order), enable persistence:

csharp

<ejs-grid id="Grid" allowPaging="true" enablePersistence="true">
    <!-- Grid configuration -->
</ejs-grid>

⚠️ Rule:

enablePersistence="true"

is required when using state management in grid.

要持久化网格状态（排序、筛选、分组、分页、列顺序），请启用持久化功能：

csharp

<ejs-grid id="Grid" allowPaging="true" enablePersistence="true">
    <!-- Grid配置 -->
</ejs-grid>

⚠️ 规则：在网格中使用状态管理时，必须设置

enablePersistence="true"

。

Rule 3: Primary Key Configuration for Editing

规则3：编辑功能的主键配置

The

isPrimaryKey="true"

attribute is required on the key column — editing silently fails without it.

csharp

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>

必须在关键字段上设置

isPrimaryKey="true"

属性——如果不设置，编辑操作会静默失败。

csharp

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>

Feature/Skill Navigation Guide

功能/技能导航指南

Getting Started & Setup

入门与设置

📄 Read: references/getting-started.md

NuGet package installation
Tag helper registration
CSS and script setup
Basic grid initialization
Data binding fundamentals

📄 阅读：references/getting-started.md

NuGet包安装
标签助手注册
CSS和脚本设置
基础网格初始化
数据绑定基础

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local data binding (IEnumerable, List, DataTable)
Remote data with DataManager (OData, WebAPI)
Loading indicators
Dynamic data refresh

📄 阅读：references/data-binding.md

本地数据绑定（IEnumerable、List、DataTable）
结合DataManager的远程数据（OData、WebAPI）
加载指示器
动态数据刷新

Column Configuration

列配置

📄 Read: references/columns.md

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

📄 阅读：references/columns.md

列定义和属性
列类型（字符串、数字、日期、布尔值、复选框）
列宽度和格式化
列模板和自定义渲染
列功能（合并、重排、调整大小）
外键列
堆叠表头

Data Aggregation

数据聚合

📄 Read: references/aggregates.md

Footer aggregates (Sum, Avg, Count, Min, Max)
Group footer aggregates
Group caption aggregates
Custom aggregate functions
Reactive aggregate updates

📄 阅读：references/aggregates.md

页脚聚合（求和、平均值、计数、最小值、最大值）
分组页脚聚合
分组标题聚合
自定义聚合函数
响应式聚合更新

Navigation & Pagination

导航与分页

📄 Read: references/paging.md

Enable and configure paging
Page size configuration
Navigation and page change
External paging

📄 阅读：references/paging.md

启用和配置分页
页面大小配置
导航和页面切换
外部分页

Sorting Data

数据排序

📄 Read: references/sorting.md

Enable sorting (single and multi-column)
Initial sort configuration
Custom sort comparers
Sort events

📄 阅读：references/sorting.md

启用排序（单列和多列）
初始排序配置
自定义排序比较器
排序事件

Filtering

筛选

Start here: 📄 Read references/filter-setup.md — Enable filtering, choose filter type (FilterBar, Menu, Excel, CheckBox)

Choose your type:

📄 Read references/filter-types.md — All filter types: FilterBar (inline text), Menu (operators), Excel (checkboxes)
📄 Read references/filter-operators.md — All filter operators, syntax, wildcards, AND/OR logic

从这里开始：📄 阅读 references/filter-setup.md — 启用筛选，选择筛选类型（FilterBar、Menu、Excel、CheckBox）

选择类型：

📄 阅读 references/filter-types.md — 所有筛选类型：FilterBar（内联文本）、Menu（操作符）、Excel（复选框）
📄 阅读 references/filter-operators.md — 所有筛选操作符、语法、通配符、AND/OR逻辑

Searching

搜索

📄 Read: references/searching.md

Grid search functionality
Global search across columns
Search configuration

📄 阅读：references/searching.md

网格搜索功能
跨列全局搜索
搜索配置

Grouping Data

数据分组

📄 Read: references/grouping.md

Enable grouping by columns
Group by multiple columns
Caption templates
Group footer aggregates
Lazy-load grouping

📄 阅读：references/grouping.md

启用按列分组
按多列分组
标题模板
分组页脚聚合
懒加载分组

Selection

选择

📄 Read: references/selection.md

Row, cell, and column selection modes
Checkbox selection
Multiple selection handling
Selection events

📄 阅读：references/selection.md

行、单元格和列选择模式
复选框选择
多选处理
选择事件

Editing

编辑

📄 Read: references/editing.md

Enable editing (allowEditing, allowAdding, allowDeleting)
Edit modes: Inline, Batch, Dialog
Edit triggers (double-click, toolbar)
Custom edit templates
Validation rules
Server-side data persistence

📄 阅读：references/editing.md

启用编辑（allowEditing、allowAdding、allowDeleting）
编辑模式：Inline、Batch、Dialog
编辑触发方式（双击、工具栏）
自定义编辑模板
验证规则
服务端数据持久化

Row Features

行功能

📄 Read: references/row.md

Row templates
Detail templates (expand/collapse)
Row drag and drop
Row pinning
Row spanning

📄 阅读：references/row.md

行模板
详情模板（展开/折叠）
行拖拽
行固定
行合并

Toolbar

工具栏

📄 Read: references/tool-bar.md

Built-in toolbar items
Custom toolbar buttons
Toolbar events

📄 阅读：references/tool-bar.md

内置工具栏项
自定义工具栏按钮
工具栏事件

Exporting to Excel

导出到Excel

📄 Read: references/excel-export.md

Excel export setup
Export options and customization
Export with templates
Server-side export

📄 阅读：references/excel-export.md

Excel导出设置
导出选项和自定义配置
带模板的导出
服务端导出

Exporting to PDF

导出到PDF

📄 Read: references/pdf-export.md

PDF export setup
Headers and footers
Export options and customization
Export with templates
Server-side export

📄 阅读：references/pdf-export.md

PDF导出设置
页眉和页脚
导出选项和自定义配置
带模板的导出
服务端导出

Printing

打印

📄 Read: references/print.md

Print grid
Print templates
Print customization

📄 阅读：references/print.md

打印网格
打印模板
打印自定义配置

Styling & Appearance

样式与外观

📄 Read: references/style-and-appearance.md

CSS customization
Themes and dark mode
Inline styling and classes
Custom color schemes

📄 阅读：references/style-and-appearance.md

CSS自定义
主题和深色模式
内联样式和类
自定义配色方案

Freezing & Pinning

冻结与固定

📄 Read: references/frozen.md

Freeze columns
Freeze rows
Row pinning
Frozen column behavior

📄 阅读：references/frozen.md

冻结列
冻结行
行固定
冻结列行为

Scrolling Modes

滚动模式

📄 Read: references/scrolling.md

Standard scrolling
Virtual scrolling (performance optimization)
Infinite scrolling
Scrollbar and height configuration

📄 阅读：references/scrolling.md

标准滚动
虚拟滚动（性能优化）
无限滚动
滚动条和高度配置

Hierarchy & Nested Data

分层与嵌套数据

📄 Read: references/hierarchy-grid.md

Parent-child data structures
Child grid configuration
Expand and collapse behavior
Detail row templates
Lazy loading child data

📄 阅读：references/hierarchy-grid.md

父子数据结构
子网格配置
展开和折叠行为
详情行模板
懒加载子数据

Context Menu

上下文菜单

📄 Read: references/context-menu.md

Built-in context menu items
Custom context menus
Context menu events

📄 阅读：references/context-menu.md

内置上下文菜单项
自定义上下文菜单
上下文菜单事件

Cell Features

单元格功能

📄 Read: references/cell.md

Cell templates
Cell customization via events
Custom cell attributes
Cell tooltips

📄 阅读：references/cell.md

单元格模板
通过事件自定义单元格
自定义单元格属性
单元格提示

Clipboard Operations

剪贴板操作

📄 Read: references/clipboard.md

Copy and paste functionality
Copy with headers
Custom separators

📄 阅读：references/clipboard.md

复制和粘贴功能
带表头的复制
自定义分隔符

Configuration Management

配置管理

📄 Read: references/global-local.md

Global grid settings
Local column configuration

📄 阅读：references/global-local.md

全局网格设置
本地列配置

State Management

状态管理

📄 Read: references/state-management.md

Persist grid state
Save and restore state
Local storage

⚠️ Rule:

enablePersistence="true"

must be enabled when using state management in grid.

📄 阅读：references/state-management.md

持久化网格状态
保存和恢复状态
本地存储

⚠️ 规则：在网格中使用状态管理时，必须启用

enablePersistence="true"

。

Data Validation

数据验证

📄 Read: references/validation.md

Built-in validation rules
Custom validation logic
Dynamic validation
Server-side validation
Error handling

📄 阅读：references/validation.md

内置验证规则
自定义验证逻辑
动态验证
服务端验证
错误处理

Command Column & Row Actions

命令列与行操作

📄 Read: references/command-column.md

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

📄 阅读：references/command-column.md

内置命令（编辑、删除、保存、取消）
自定义命令按钮
基于角色和状态的命令
命令点击事件
条件命令可见性
CSS样式和图标

Localization & Internationalization

本地化与国际化

📄 Read: references/localization.md

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

📄 阅读：references/localization.md

多语言支持（60+种语言）
区域设置和文化配置
数字、日期和货币格式化
RTL支持（阿拉伯语、希伯来语、波斯语）
自定义本地化和翻译
语言切换器实现

Responsive Design & Mobile

响应式设计与移动端适配

📄 Read: references/adaptive.md

Enable adaptive UI for mobile
Full-screen dialogs for filtering/editing
Mobile-optimized layouts

📄 Read: references/responsive-design.md

Responsive grid layouts
Column visibility on mobile
Touch-friendly interactions
Mobile breakpoints

📄 阅读：references/adaptive.md

启用移动端自适应UI
筛选/编辑的全屏对话框
移动端优化布局

📄 阅读：references/responsive-design.md

响应式网格布局
移动端列可见性
触控友好交互
移动端断点

API Reference & Properties

API参考与属性

📄 Read: references/properties-configuration.md

All configurable properties organized by category
Quick reference table for quick lookup
When to use each property
Configuration requirements

📄 阅读：references/properties-configuration.md

按类别组织的所有可配置属性
快速查询参考表
各属性的使用场景
配置要求

Programmatic Control (Methods)

程序化控制（方法）

📄 Read: references/programmatic-api.md

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

📄 阅读：references/programmatic-api.md

按类别划分的Grid方法（数据、行、列、排序、筛选、分组、分页、编辑、导出）
方法签名和参数
返回值和使用模式
服务端方法调用

Event Communication (Events)

事件通信（事件）

📄 Read: references/events-catalog.md

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

📄 阅读：references/events-catalog.md

所有Grid事件及其触发时机和使用场景
ActionBegin事件：用于取消或修改操作
ActionComplete事件：用于响应式操作
ActionFailure事件：用于错误处理
使用
```
args.requestType
```
识别操作类型

Data Connectivity & Adaptors

数据连接与适配器

📄 Read: references/adaptors.md

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

📄 阅读：references/adaptors.md

5+种适配器类型用于后端集成
UrlAdaptor、ODataV4Adaptor、WebApiAdaptor
自定义适配器和RemoteSaveAdaptor
后端配置示例（C#、Node.js）
请求/响应格式规范
错误处理和适配器对比

Performance Optimization

性能优化

📄 Read: references/performance.md

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

📄 阅读：references/performance.md

虚拟滚动支持10,000+条记录
无限滚动和渐进式加载
内存管理和清理策略
包大小优化
事件防抖和节流
性能基准测试

Accessibility & Compliance

可访问性与合规性

📄 Read: references/accessibility.md

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

📄 阅读：references/accessibility.md

符合WCAG 2.2和Section 508标准
WAI-ARIA实现和屏幕阅读器支持
键盘导航（Tab、箭头键、Enter、Escape）
颜色对比度和焦点管理
可访问性测试工具
语义化HTML实践

Quick Start Example

快速入门示例

cshtml

@* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2

cshtml

@* ~/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>

csharp

// Controller / PageModel
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords();
    return View();
}

cshtml

@* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2

cshtml

@* ~/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>

csharp

// Controller / PageModel
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords();
    return View();
}

syncfusion-aspnetcore-grid

Original

Translation

Syncfusion ASP.NET Core Grid

Syncfusion ASP.NET Core Grid

⚠️ Security & Trust Boundary

⚠️ 安全与信任边界

Table of Contents

目录

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Mandatory Rules for Server-Side Grid Configuration

服务端Grid配置的强制规则

Rule 1: DataManager Adaptor Configuration

规则1：DataManager适配器配置

Rule 2: EnablePersistence for State Management

规则2：启用持久化以管理状态

Rule 3: Primary Key Configuration for Editing

规则3：编辑功能的主键配置

Feature/Skill Navigation Guide

功能/技能导航指南

Getting Started & Setup

入门与设置

Data Binding

数据绑定

Column Configuration

列配置

Data Aggregation

数据聚合

Navigation & Pagination

导航与分页

Sorting Data

数据排序

Filtering

筛选

Searching

搜索

Grouping Data

数据分组

Selection

选择

Editing

编辑

Row Features

行功能

Toolbar

工具栏

Exporting to Excel

导出到Excel

Exporting to PDF

导出到PDF

Printing

打印

Styling & Appearance

样式与外观

Freezing & Pinning

冻结与固定

Scrolling Modes

滚动模式

Hierarchy & Nested Data

分层与嵌套数据

Context Menu

上下文菜单

Cell Features

单元格功能

Clipboard Operations

剪贴板操作

Configuration Management

配置管理

State Management

状态管理

Data Validation

数据验证

Command Column & Row Actions

命令列与行操作

Localization & Internationalization

本地化与国际化

Responsive Design & Mobile