syncfusion-blazor-datagrid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor DataGrid

实现Syncfusion Blazor DataGrid

The Syncfusion Blazor DataGrid (

SfGrid<TValue>

) is a high-performance, feature-rich component for displaying and manipulating tabular data. It supports data binding, sorting, filtering, grouping, paging, editing, selection, aggregates, export, virtual/infinite scrolling, templates, and more.

NuGet:

Syncfusion.Blazor.Grid

Syncfusion.Blazor.Themes

Namespace:

Syncfusion.Blazor.Grids

Syncfusion Blazor DataGrid（

SfGrid<TValue>

）是一款高性能、功能丰富的组件，用于显示和操作表格数据。它支持数据绑定、排序、筛选、分组、分页、编辑、选择、聚合、导出、虚拟/无限滚动、模板等功能。

NuGet：

Syncfusion.Blazor.Grid

Syncfusion.Blazor.Themes

命名空间：

Syncfusion.Blazor.Grids

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Set up and configure a DataGrid in Blazor Server, WebAssembly, Web App, or MAUI
Bind local or remote data (OData, HTTP, SfDataManager)
Configure columns (type, format, template, frozen, reorder, resize, chooser)
Implement sorting, filtering (FilterBar/Menu/Excel/CheckBox), or searching
Enable grouping with lazy load or caption templates
Configure paging with custom templates or SfPager
Set up virtual scrolling, infinite scrolling for large datasets
Implement editing (Normal/Dialog/Batch/Command column) with validation
Configure selection (row, cell, checkbox) with programmatic control
Use clipboard copy, AutoFill, or Paste features
Add aggregates (footer, group, caption, reactive)
Use row/column templates, detail template, row drag-drop
Configure toolbar, context menu, column menu, column chooser
Export data to Excel or PDF
Manage print functionality
Optimize performance (SetRowDataAsync, PreventRender)
Handle DataGrid events
Manage state persistence (EnablePersistence)
Customize styling and appearance
Enable adaptive UI for mobile/responsive layouts

当你需要以下操作时使用此技能：

在Blazor Server、WebAssembly、Web App或MAUI中设置和配置DataGrid
绑定本地或远程数据（OData、HTTP、SfDataManager）
配置列（类型、格式、模板、冻结、重排、调整大小、选择器）
实现排序、筛选（筛选栏/菜单/Excel/复选框）或搜索功能
启用带懒加载或标题模板的分组
使用自定义模板或SfPager配置分页
为大型数据集设置虚拟滚动、无限滚动
实现带验证的编辑（普通/对话框/批量/命令列模式）
配置选择（行、单元格、复选框）并支持程序化控制
使用剪贴板复制、自动填充或粘贴功能
添加聚合（页脚、分组、标题、响应式聚合）
使用行/列模板、详情模板、行拖拽
配置工具栏、上下文菜单、列菜单、列选择器
将数据导出为Excel或PDF格式
管理打印功能
优化性能（SetRowDataAsync、PreventRender）
处理DataGrid事件
管理状态持久化（EnablePersistence）
自定义样式和外观
为移动端/响应式布局启用自适应UI

🔒 Mandatory Key Rules

🔒 强制核心规则

These rules govern how this skill MUST behave. They are mandatory and must be strictly followed.

这些规则规定了此技能必须遵循的行为准则，具有强制性，必须严格遵守。

1. Purpose and Responsibility

1. 目的与职责

Your responsibility is to interpret any natural‑language user request and provide:

Accurate
Complete
Validated

information about all supported aspects of the Syncfusion Blazor DataGrid, including:

Public APIs
Properties
Events
Features
Behaviors

你的职责是解读用户的自然语言请求，并提供关于Syncfusion Blazor DataGrid所有支持方面的：

准确
完整
经过验证

的信息，包括：

公共API
属性
事件
功能
行为

2. Accuracy and API Compliance

2. 准确性与API合规性

The Skill MUST:

Use only officially supported Syncfusion DataGrid features.
NEVER invent APIs, methods, properties, events, behaviors, or future features.
NEVER provide unsupported or hypothetical code samples.
ALWAYS follow official Syncfusion component design patterns.

If a feature is not supported:

Clearly state the limitation.
Suggest a supported alternative when possible.

此技能必须：

仅使用官方支持的Syncfusion DataGrid功能。
绝不虚构API、方法、属性、事件、行为或未来功能。
绝不提供不支持或假设性的代码示例。
始终遵循官方Syncfusion组件设计模式。

如果某项功能不被支持：

明确说明限制。
尽可能建议支持的替代方案。

3. Interpreting Natural-Language Requests

3. 解读自然语言请求

When user requests are incomplete:

Infer reasonable assumptions using official Grid best practices.
Fill missing gaps with accurate and relevant information.
Request clarification only when essential.

当用户请求不完整时：

使用官方Grid最佳实践做出合理假设。
用准确且相关的信息填补缺失内容。
仅在必要时请求澄清。

4. Response Quality Requirements

4. 响应质量要求

Every response MUST:

Be technically accurate
Be complete and well‑structured
Include required dependencies and configuration notes
Follow real, documented Syncfusion API behavior
Avoid contradictions or ambiguity

每个响应必须：

技术准确
完整且结构清晰
包含所需依赖项和配置说明
遵循已记录的Syncfusion API实际行为
避免矛盾或歧义

5. Handling Unsupported User Requests

5. 处理不支持的用户请求

If the user asks for an unsupported capability:

Explicitly state that it is not supported
Suggest official alternatives or valid workarounds
NEVER simulate or fabricate impossible functionality

如果用户要求不支持的功能：

明确说明该功能不被支持
建议官方替代方案或有效的解决方法
绝不模拟或捏造不可能的功能

6. Design Pattern Enforcement

6. 设计模式强制执行

The Skill MUST follow Syncfusion official patterns, including:

Correct component structure (
```
SfGrid
```
,
```
GridColumn
```
,
```
GridEditSettings
```
, etc.)
Proper async event and API usage
Valid configuration properties and enums
Supported data‑binding approaches
Real event patterns and names

此技能必须遵循Syncfusion官方模式，包括：

正确的组件结构（
```
SfGrid
```
、
```
GridColumn
```
、
```
GridEditSettings
```
等）
正确的异步事件和API使用方式
有效的配置属性和枚举
支持的数据绑定方法
真实的事件模式和名称

7. Quality, Completeness & Reliability

7. 质量、完整性与可靠性

The Skill MUST:

Use only validated and real Grid capabilities
Provide actionable and implementation‑ready guidance
Ensure clarity so users can follow without guesswork
Maintain clean, readable, and professional formatting

此技能必须：

仅使用经过验证的真实Grid功能
提供可操作且可直接实现的指导
确保表述清晰，用户无需猜测即可遵循
保持简洁、易读且专业的格式

8. No-Hallucination Safeguard

8. 防虚构保障

The Skill MUST NOT:

Invent non‑existent APIs or behavior
Suggest unsupported modes, features, or configuration
Provide incorrect, misleading, or unverifiable code
Describe undocumented internal behavior

If unsure:

Ask for clarification OR
Clearly state the limitation

此技能不得：

虚构不存在的API或行为
建议不支持的模式、功能或配置
提供错误、误导或无法验证的代码
描述未记录的内部行为

如有疑问：

请求澄清或
明确说明限制

9. Event Name Verification Requirement

9. 事件名称验证要求

CRITICAL: Event names MUST be verified against

references/events.md

BEFORE providing code examples. All grid events MUST be defined inside the

<GridEvents>

component

Common Mistakes to Avoid:

❌
```
OnSortChange
```
- Does NOT exist. Use
```
Sorting
```
,
```
Sorted
```
instead
❌
```
OnFilterChange
```
- Does NOT exist. Use
```
Filtering
```
,
```
Filtered
```
instead
❌
```
OnPageChange
```
- Does NOT exist. Use
```
PageChanging
```
,
```
PageChanged
```
instead
❌
```
OnGroupChange
```
- Does NOT exist. Use
```
Grouping
```
,
```
Grouped
```
instead

Rule: ALWAYS cross-reference

references/events.md

for:

Exact event names (case-sensitive)
Event argument types
Whether events are cancelable
When they fire (before/after operation)

Verification Checklist Before Providing Event Code:

Check if event name exists in
```
references/events.md
```
Verify the correct
```
EventArgs
```
type
Confirm
```
Cancelable
```
status (✅ or ❌)
Test against actual Syncfusion documentation
Never assume naming conventions (e.g.,
```
On
```
prefix,
```
Change
```
suffix)

关键： 在提供代码示例之前，必须对照

references/events.md

验证事件名称。所有网格事件必须定义在

<GridEvents>

组件内

需避免的常见错误：

❌
```
OnSortChange
```
- 不存在，请使用
```
Sorting
```
、
```
Sorted
```
替代
❌
```
OnFilterChange
```
- 不存在，请使用
```
Filtering
```
、
```
Filtered
```
替代
❌
```
OnPageChange
```
- 不存在，请使用
```
PageChanging
```
、
```
PageChanged
```
替代
❌
```
OnGroupChange
```
- 不存在，请使用
```
Grouping
```
、
```
Grouped
```
替代

规则： 始终对照

references/events.md

确认：

准确的事件名称（区分大小写）
事件参数类型
事件是否可取消
触发时机（操作前/后）

提供事件代码前的验证清单：

检查事件名称是否存在于
```
references/events.md
```
中
验证正确的
```
EventArgs
```
类型
确认
```
Cancelable
```
状态（✅ 或 ❌）
对照Syncfusion官方文档测试
绝不假设命名约定（如
```
On
```
前缀、
```
Change
```
后缀）

Strict Rules for Grid Events

网格事件严格规则

1. Event Handlers MUST be in
<GridEvents>
Component

1. 事件处理程序必须在
<GridEvents>
组件内

✅ Define ALL event handlers inside
```
<GridEvents TValue="YourType">
```
- ✅ Use the exact event names as properties (e.g.,
```
DataBound
```
  ,
```
RowSelecting
```
  ,
```
Grouped
```
  )
- ❌ DO NOT use
```
@onEventName
```
  syntax on
```
<SfGrid>
```
- ❌ DO NOT define event handlers on any root element

✅ 所有事件处理程序定义在
```
<GridEvents TValue="YourType">
```
内
- ✅ 使用与属性完全一致的事件名称（如
```
DataBound
```
  、
```
RowSelecting
```
  、
```
Grouped
```
  ）
- ❌ 不要在
```
<SfGrid>
```
  上使用
```
@onEventName
```
  语法
- ❌ 不要在任何根元素上定义事件处理程序

2. Correct Event Handler Signatures

2. 正确的事件处理程序签名

✅ Use
```
async Task
```
for event handlers
- ✅ Event handlers may have specific parameter types (e.g.,
```
GridEventArgs
```
  ,
```
RowSelectEventArgs
```
  )
- ✅ Some events have no parameters (e.g.,
```
DataBound()
```
  ,
```
Created()
```
  )
- ❌ Do not use synchronous
```
void
```
  methods for async operations

✅ 事件处理程序使用
```
async Task
```
- ✅ 事件处理程序可能有特定的参数类型（如
```
GridEventArgs
```
  、
```
RowSelectEventArgs
```
  ）
- ✅ 部分事件无参数（如
```
DataBound()
```
  、
```
Created()
```
  ）
- ❌ 异步操作不要使用同步
```
void
```
  方法

3. API Method Calls MUST NOT be in Lifecycle Events

3. API方法调用不得在生命周期事件中

❌ DO NOT call API methods in
```
OnInitialized()
```
- ❌ DO NOT call API methods in
```
OnAfterRenderAsync()
```
- ❌ DO NOT call API methods in
```
OnParametersSet()
```
- ✅ ONLY call API methods in response to user interactions (button clicks, dropdown changes, etc.)
- ✅ API methods CAN be called inside GridEvents handlers

❌ 不要在
```
OnInitialized()
```
中调用API方法
- ❌ 不要在
```
OnAfterRenderAsync()
```
  中调用API方法
- ❌ 不要在
```
OnParametersSet()
```
  中调用API方法
- ✅ 仅在响应用户交互（按钮点击、下拉框变化等）时调用API方法
- ✅ API方法可以在GridEvents处理程序内调用

4. Use Async/Await Pattern

4. 使用Async/Await模式

✅ Always use
```
await
```
with async API methods
- ✅ Define event handlers as
```
async Task
```
- ✅ Mark code block methods as
```
async Task
```
- ❌ Do not use synchronous method calls for async operations

✅ 异步API方法始终使用
```
await
```
- ✅ 事件处理程序定义为
```
async Task
```
- ✅ 代码块方法标记为
```
async Task
```
- ❌ 异步操作不要使用同步方法调用

5. Grid Reference Required for API Calls

5. API调用需要Grid引用

✅ Use
```
@ref="Grid"
```
to get the Grid instance
- ✅ Use the reference to call API methods (e.g.,
```
await Grid.GroupColumnAsync()
```
  )
- ❌ Do not attempt to call methods without a reference

✅ 使用
```
@ref="Grid"
```
获取Grid实例
- ✅ 使用引用调用API方法（如
```
await Grid.GroupColumnAsync()
```
  ）
- ❌ 不要尝试在无引用的情况下调用方法

6. Event Types Must Match GridEvents TValue

6. 事件类型必须匹配GridEvents的TValue

✅ Set
```
TValue="YourDataType"
```
to match your data model
- ✅ All event handlers will be properly typed with this model
- ❌ Do not use generic or wrong type for TValue

✅ 设置
```
TValue="YourDataType"
```
以匹配数据模型
- ✅ 所有事件处理程序将据此正确键入模型
- ❌ 不要为TValue使用泛型或错误类型

Navigation Guide

导航指南

Setup & Getting Started

设置与入门

📄 Read: references/getting-started.md

NuGet install,
```
_Imports.razor
```
,
```
Program.cs
```
, theme/script setup, basic grid

📄 Read: references/getting-started-app-types.md

Server App, Web App (Auto/WASM), MAUI variants

📄 阅读： references/getting-started.md

NuGet安装、
```
_Imports.razor
```
配置、
```
Program.cs
```
设置、主题/脚本配置、基础网格

📄 阅读： references/getting-started-app-types.md

Server App、Web App（自动/WASM）、MAUI变体

Data

数据

📄 Read: references/data-binding.md

Local (List, ExpandoObject, DynamicObject, DataTable, ObservableCollection)

📄 阅读： references/data-binding.md

本地数据（List、ExpandoObject、DynamicObject、DataTable、ObservableCollection）

Connecting to Adaptors (Remote Data)

连接到适配器（远程数据）

📄 Read: references/odatav4-adaptor.md

OData V4 service setup, ODataConventionModelBuilder, [EnableQuery], automatic $filter/$orderby/$skip/$top, CRUD with PATCH/DELETE

📄 Read: references/web-api-adaptor.md

Web API with { Items, Count } response, manual $filter/$orderby/$skip/$top QueryString parsing, CRUD with GET/POST/PUT/DELETE
Security note: Do NOT bind
```
SfDataManager.Url
```
to arbitrary user-supplied URLs. Use an operator-configured string variable (for example
```
Url="@DataApiUrl"
```
where
```
DataApiUrl
```
is read from
```
ALLOWED_API_URL
```
in configuration), an internal proxy/gateway, field/operator whitelists, and server-side validation/sanitization. See references/web-api-adaptor.md
```
Security Considerations
```
for examples.

📄 Read: references/url-adaptor.md

Custom API with { result, count } response, DataManagerRequest POST body, DataOperations helpers, InsertUrl/UpdateUrl/RemoveUrl/CrudUrl/BatchUrl
Security note: Use a configuration-backed URL variable (for example
```
Url="@DataApiUrl"
```
where
```
DataApiUrl
```
is read from
```
ALLOWED_API_URL
```
in configuration), avoid user-supplied endpoints, and route third-party requests through an internal proxy/gateway. See references/url-adaptor.md for examples and configuration snippets.

📄 Read: references/custom-adaptor.md

DataAdaptor abstract class, override Read/Insert/Update/Remove/BatchUpdate, service injection, adaptor as component, custom parameters via Query.AddParams
Security note: When implementing
```
CustomAdaptor
```
, do not trust
```
dm.Params
```
or user-supplied endpoints. Use operator-configured endpoints, validate
```
dm.Params
```
, whitelist fields/operators, and route third-party calls through a proxy. See references/custom-adaptor.md
```
Security Considerations
```
for examples.

📄 阅读： references/odatav4-adaptor.md

OData V4服务设置、ODataConventionModelBuilder、[EnableQuery]、自动$filter/$orderby/$skip/$top、使用PATCH/DELETE的CRUD操作

📄 阅读： references/web-api-adaptor.md

返回{ Items, Count }的Web API、手动解析$filter/$orderby/$skip/$top查询字符串、使用GET/POST/PUT/DELETE的CRUD操作
安全提示： 不要将
```
SfDataManager.Url
```
绑定到任意用户提供的URL。使用操作员配置的字符串变量（例如
```
Url="@DataApiUrl"
```
，其中
```
DataApiUrl
```
从配置中的
```
ALLOWED_API_URL
```
读取）、内部代理/网关、字段/操作员白名单以及服务器端验证/清理。请参阅references/web-api-adaptor.md中的
```
Security Considerations
```
示例。

📄 阅读： references/url-adaptor.md

返回{ result, count }的自定义API、DataManagerRequest POST主体、DataOperations辅助工具、InsertUrl/UpdateUrl/RemoveUrl/CrudUrl/BatchUrl
安全提示： 使用配置支持的URL变量（例如
```
Url="@DataApiUrl"
```
，其中
```
DataApiUrl
```
从配置中的
```
ALLOWED_API_URL
```
读取），避免用户提供的端点，并通过内部代理/网关路由第三方请求。请参阅references/url-adaptor.md中的示例和配置片段。

📄 阅读： references/custom-adaptor.md

DataAdaptor抽象类、重写Read/Insert/Update/Remove/BatchUpdate、服务注入、作为组件的适配器、通过Query.AddParams传递自定义参数
安全提示： 实现
```
CustomAdaptor
```
时，不要信任
```
dm.Params
```
或用户提供的端点。使用操作员配置的端点，验证
```
dm.Params
```
，白名单字段/操作员，并通过代理路由第三方调用。请参阅references/custom-adaptor.md中的
```
Security Considerations
```
示例。

Columns

列

📄 Read: references/columns.md

ColumnType, Format, TextAlign, frozen, reorder, resize, chooser, stacked headers, column menu, foreign key

📄 Read: references/cell.md

QueryCellInfo, CustomAttributes, ClipMode, GridLines, tooltips

📄 阅读： references/columns.md

ColumnType、Format、TextAlign、冻结、重排、调整大小、选择器、堆叠表头、列菜单、外键

📄 阅读： references/cell.md

QueryCellInfo、CustomAttributes、ClipMode、GridLines、工具提示

Sorting, Filtering, Searching

排序、筛选、搜索

📄 Read: references/sorting.md

AllowSorting, multi-sort, SortColumnAsync, ClearSortingAsync

📄 Read: references/filtering.md

AllowFiltering, FilterType (FilterBar/Menu/Excel/CheckBox), operators, FilterByColumnAsync

📄 Read: references/searching.md

Toolbar Search, SearchAsync, GridSearchSettings

📄 阅读： references/sorting.md

AllowSorting、多列排序、SortColumnAsync、ClearSortingAsync

📄 阅读： references/filtering.md

AllowFiltering、FilterType（筛选栏/菜单/Excel/复选框）、操作符、FilterByColumnAsync

📄 阅读： references/searching.md

工具栏搜索、SearchAsync、GridSearchSettings

Grouping & Paging

分组与分页

📄 Read: references/grouping.md

AllowGrouping, lazy load grouping, CaptionTemplate, programmatic group/ungroup

📄 Read: references/paging.md

AllowPaging, GridPageSettings, pager template, GoToPageAsync

📄 阅读： references/grouping.md

AllowGrouping、懒加载分组、CaptionTemplate、程序化分组/取消分组

📄 阅读： references/paging.md

AllowPaging、GridPageSettings、分页器模板、GoToPageAsync

Scrolling

滚动

📄 Read: references/scrolling.md

Height/Width, sticky header, ScrollIntoViewAsync

📄 Read: references/virtual-scrolling.md

EnableVirtualization, EnableColumnVirtualization, OverscanCount, limitations

📄 Read: references/infinite-scrolling.md

EnableInfiniteScrolling, GridInfiniteScrollSettings, cache mode, limitations

📄 阅读： references/scrolling.md

Height/Width、粘性表头、ScrollIntoViewAsync

📄 阅读： references/virtual-scrolling.md

EnableVirtualization、EnableColumnVirtualization、OverscanCount、限制

📄 阅读： references/infinite-scrolling.md

EnableInfiniteScrolling、GridInfiniteScrollSettings、缓存模式、限制

Editing

编辑

📄 Read: references/editing.md

GridEditSettings, EditMode (Normal/Dialog/Batch/CommandColumn), ValidationRules, EditType, EditTemplate, CRUD methods

Read: references/editing-patterns.md

Cancel edit based on condition, disable editing for specific rows
Provide new/edited item via events, default column values, new row position
Always-show add-new-row form, delete multiple rows, single-click editing
Save new row at a specific index, inline template editing

📄 Read: references/editing-validation.md

Per-column
```
ValidationRules
```
, Data Annotation attributes (
```
[Required]
```
,
```
[Range]
```
, etc.)
Custom validation attributes, complex type validation, custom validator component

📄 阅读： references/editing.md

GridEditSettings、EditMode（普通/对话框/批量/命令列）、ValidationRules、EditType、EditTemplate、CRUD方法

阅读： references/editing-patterns.md

根据条件取消编辑、禁用特定行的编辑
通过事件提供新/编辑项、默认列值、新行位置
始终显示新增行表单、删除多行、单击编辑
在特定索引保存新行、内联模板编辑

📄 阅读： references/editing-validation.md

每列的
```
ValidationRules
```
、数据注解属性（
```
[Required]
```
、
```
[Range]
```
等）
自定义验证属性、复杂类型验证、自定义验证器组件

Selection

选择

📄 Read: references/selection.md

AllowSelection, SelectionMode, SelectionType, checkbox selection, programmatic selection

📄 Read: references/clipboard.md

Clipboard copy (Ctrl+C / Ctrl+Shift+H), CopyAsync, AutoFill drag handle, Paste (Ctrl+V), batch editing requirements

📄 阅读： references/selection.md

AllowSelection、SelectionMode、SelectionType、复选框选择、程序化选择

📄 阅读： references/clipboard.md

剪贴板复制（Ctrl+C / Ctrl+Shift+H）、CopyAsync、自动填充拖拽手柄、粘贴（Ctrl+V）、批量编辑要求

Aggregates

聚合

📄 Read: references/aggregates.md

GridAggregates, AggregateType, FooterTemplate, GroupFooterTemplate, GroupCaptionTemplate, reactive aggregates

📄 阅读： references/aggregates.md

GridAggregates、AggregateType、FooterTemplate、GroupFooterTemplate、GroupCaptionTemplate、响应式聚合

Row Features & Templates

行功能与模板

📄 Read: references/row-features.md

RowDataBound, row drag-drop, row height, row spanning, RowTemplate

📄Read: references/templates-structural.md

ColumnTemplate (image, hyperlink, checkbox, SfChip), HeaderTemplate, RowTemplate, RowTemplate formatting, DetailTemplate, expand/collapse APIs, expand on load, hide expand icon, custom CSS icons, hierarchical nested Grid

📄 Read: references/templates-interactive.md

ToolbarTemplate, Column EditTemplate, GridEditSettings Template, disable inputs on add vs edit, triple underscore nested binding, focus editor on dialog open, RowUpdating transform, FooterTemplate, CaptionTemplate, custom Blazor component in caption, locale customization, PagerTemplate

📄 阅读： references/row-features.md

RowDataBound、行拖拽、行高、行合并、RowTemplate

📄阅读： references/templates-structural.md

ColumnTemplate（图片、超链接、复选框、SfChip）、HeaderTemplate、RowTemplate、RowTemplate格式化、DetailTemplate、展开/折叠API、加载时展开、隐藏展开图标、自定义CSS图标、分层嵌套Grid

📄 阅读： references/templates-interactive.md

ToolbarTemplate、列EditTemplate、GridEditSettings模板、区分新增与编辑时禁用输入、三重下划线嵌套绑定、对话框打开时聚焦编辑器、RowUpdating转换、FooterTemplate、CaptionTemplate、标题中的自定义Blazor组件、本地化自定义、PagerTemplate

Toolbar, Context Menu

工具栏、上下文菜单

📄 Read: references/toolbar.md

Built-in/custom toolbar items, OnToolbarClick, ToolbarTemplate

📄 Read: references/context-menu.md

ContextMenuItems, custom items, ContextMenuItemClicked

📄 阅读： references/toolbar.md

内置/自定义工具栏项、OnToolbarClick、ToolbarTemplate

📄 阅读： references/context-menu.md

ContextMenuItems、自定义项、ContextMenuItemClicked

Export & Print

导出与打印

📄 Read: references/excel-export.md

AllowExcelExport, ExportToExcelAsync, ExcelExportProperties, theme/template export

📄 Read: references/pdf-export.md

AllowPdfExport, ExportToPdfAsync, PdfExportProperties, template PDF export

📄 Read: references/print.md

PrintAsync, PrintMode

📄 阅读： references/excel-export.md

AllowExcelExport、ExportToExcelAsync、ExcelExportProperties、主题/模板导出

📄 阅读： references/pdf-export.md

AllowPdfExport、ExportToPdfAsync、PdfExportProperties、模板PDF导出

📄 阅读： references/print.md

PrintAsync、PrintMode

Performance, Events, State

性能、事件、状态

📄 Read: references/performance.md

SetRowDataAsync, PreventRender, WebAssembly optimization, column virtualization tips

📄 Read: references/events.md

Complete GridEvents<TValue> reference: all edit, selection, filter, sort, group, page, toolbar, export events

📄 Read: references/state-management.md

EnablePersistence, GetPersistDataAsync, SetPersistDataAsync, ResetPersistDataAsync

📄 阅读： references/performance.md

SetRowDataAsync、PreventRender、WebAssembly优化、列虚拟化技巧

📄 阅读： references/events.md

完整的GridEvents<TValue>参考：所有编辑、选择、筛选、排序、分组、分页、工具栏、导出事件

📄 阅读： references/state-management.md

EnablePersistence、GetPersistDataAsync、SetPersistDataAsync、ResetPersistDataAsync

Styling & Adaptive UI

样式与自适应UI

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

CSS classes for grid, header, rows, filtering, editing, grouping, aggregates

📄 Read: references/adaptive-layout.md

EnableAdaptiveUI, RowRenderingMode, AdaptiveUIMode, mobile-responsive patterns

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

网格、表头、行、筛选、编辑、分组、聚合的CSS类

📄 阅读： references/adaptive-layout.md

EnableAdaptiveUI、RowRenderingMode、AdaptiveUIMode、移动端响应式模式

Quick Start

快速开始

razor

@page "/datagrid-demo"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID"    HeaderText="Order ID"   IsPrimaryKey="true" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer"   Width="150"></GridColumn>
        <GridColumn Field="Freight"    HeaderText="Freight"    Format="C2" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="OrderDate"  HeaderText="Order Date" Format="d"  Width="150" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders = new List<Order>
    {
        new Order { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = new DateTime(1996,7,4), ShipCountry = "France" },
        new Order { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = new DateTime(1996,7,5), ShipCountry = "Germany" },
    };
    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public double Freight { get; set; }
        public DateTime OrderDate { get; set; }
        public string ShipCountry { get; set; }
    }
}

razor

@page "/datagrid-demo"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID"    HeaderText="Order ID"   IsPrimaryKey="true" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer"   Width="150"></GridColumn>
        <GridColumn Field="Freight"    HeaderText="Freight"    Format="C2" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="OrderDate"  HeaderText="Order Date" Format="d"  Width="150" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders = new List<Order>
    {
        new Order { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = new DateTime(1996,7,4), ShipCountry = "France" },
        new Order { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = new DateTime(1996,7,5), ShipCountry = "Germany" },
    };
    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public double Freight { get; set; }
        public DateTime OrderDate { get; set; }
        public string ShipCountry { get; set; }
    }
}

Common Patterns

常见模式

Grid with Editing + Toolbar

带编辑功能+工具栏的Grid

razor

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="OrderID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="CustomerID" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="Freight" EditType="EditType.NumericEdit"></GridColumn>
    </GridColumns>
</SfGrid>

razor

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="OrderID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="CustomerID" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="Freight" EditType="EditType.NumericEdit"></GridColumn>
    </GridColumns>
</SfGrid>

Grid with Grouping + Paging

带分组+分页的Grid

razor

<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true">
    <GridGroupSettings Columns="@(new string[]{"ShipCountry"})"></GridGroupSettings>
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID" Width="120"></GridColumn>
        <GridColumn Field="CustomerID" Width="150"></GridColumn>
        <GridColumn Field="ShipCountry" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

razor

<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true">
    <GridGroupSettings Columns="@(new string[]{"ShipCountry"})"></GridGroupSettings>
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID" Width="120"></GridColumn>
        <GridColumn Field="CustomerID" Width="150"></GridColumn>
        <GridColumn Field="ShipCountry" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

Grid Reference for Programmatic Control

用于程序化控制的Grid引用

razor

<SfGrid @ref="Grid" DataSource="@Orders">...</SfGrid>
@code {
    SfGrid<Order> Grid;
    // Programmatic operations:
    // await Grid.SortColumnAsync("OrderID", SortDirection.Ascending, false);
    // await Grid.FilterByColumnAsync("ShipCountry", "equal", "France");
    // await Grid.GoToPageAsync(2);
    // await Grid.StartEditAsync();
    // await Grid.SelectRowAsync(0);
}

razor

<SfGrid @ref="Grid" DataSource="@Orders">...</SfGrid>
@code {
    SfGrid<Order> Grid;
    // 程序化操作:
    // await Grid.SortColumnAsync("OrderID", SortDirection.Ascending, false);
    // await Grid.FilterByColumnAsync("ShipCountry", "equal", "France");
    // await Grid.GoToPageAsync(2);
    // await Grid.StartEditAsync();
    // await Grid.SelectRowAsync(0);
}

Key Properties at a Glance

关键属性一览

Property	Description
`DataSource`	Bind `IEnumerable<T>` or `DataManagerRequest`
`AllowPaging`	Enable paging
`AllowSorting`	Enable sorting
`AllowFiltering`	Enable column filtering
`AllowGrouping`	Enable row grouping
`AllowSelection`	Enable row/cell selection
`Height` / `Width`	Fixed dimensions for scrolling
`Toolbar`	Built-in or custom toolbar items
`EnableVirtualization`	Row virtualization for large data
`EnableInfiniteScrolling`	Infinite scroll loading
`EnablePersistence`	Save state to localStorage
`EnableAdaptiveUI`	Mobile-responsive rendering

undefined

属性	描述
`DataSource`	绑定 `IEnumerable<T>` 或 `DataManagerRequest`
`AllowPaging`	启用分页
`AllowSorting`	启用排序
`AllowFiltering`	启用列筛选
`AllowGrouping`	启用行分组
`AllowSelection`	启用行/单元格选择
`Height` / `Width`	滚动的固定尺寸
`Toolbar`	内置或自定义工具栏项
`EnableVirtualization`	针对大数据的行虚拟化
`EnableInfiniteScrolling`	无限滚动加载
`EnablePersistence`	将状态保存到localStorage
`EnableAdaptiveUI`	移动端响应式渲染

undefined

syncfusion-blazor-datagrid

Original

Translation

Implementing Syncfusion Blazor DataGrid

实现Syncfusion Blazor DataGrid

When to Use This Skill

何时使用此技能

🔒 Mandatory Key Rules

🔒 强制核心规则

1. Purpose and Responsibility

1. 目的与职责

2. Accuracy and API Compliance

2. 准确性与API合规性

3. Interpreting Natural-Language Requests

3. 解读自然语言请求

4. Response Quality Requirements

4. 响应质量要求

5. Handling Unsupported User Requests

5. 处理不支持的用户请求

6. Design Pattern Enforcement

6. 设计模式强制执行

7. Quality, Completeness & Reliability

7. 质量、完整性与可靠性

8. No-Hallucination Safeguard

8. 防虚构保障

9. Event Name Verification Requirement

9. 事件名称验证要求

Strict Rules for Grid Events

网格事件严格规则

1. Event Handlers MUST be in <GridEvents> Component

1. 事件处理程序必须在<GridEvents>组件内

2. Correct Event Handler Signatures

2. 正确的事件处理程序签名

3. API Method Calls MUST NOT be in Lifecycle Events

3. API方法调用不得在生命周期事件中

4. Use Async/Await Pattern

4. 使用Async/Await模式

5. Grid Reference Required for API Calls

5. API调用需要Grid引用

6. Event Types Must Match GridEvents TValue

6. 事件类型必须匹配GridEvents的TValue

Navigation Guide

导航指南

Setup & Getting Started

设置与入门

Data

数据

Connecting to Adaptors (Remote Data)

连接到适配器（远程数据）

Columns

列

Sorting, Filtering, Searching

排序、筛选、搜索

Grouping & Paging

分组与分页

Scrolling

滚动

Editing

编辑

Selection

选择

Aggregates

聚合

Row Features & Templates

行功能与模板

Toolbar, Context Menu

工具栏、上下文菜单

Export & Print

导出与打印

Performance, Events, State

性能、事件、状态

Styling & Adaptive UI

样式与自适应UI

Quick Start

快速开始

Common Patterns

常见模式

Grid with Editing + Toolbar

带编辑功能+工具栏的Grid

Grid with Grouping + Paging

1. Event Handlers MUST be in
`<GridEvents>`
Component

1. 事件处理程序必须在
`<GridEvents>`
组件内