syncfusion-angular-grid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Angular Grid

Syncfusion Angular Grid 综合指南

A comprehensive guide to implementing powerful, feature-rich data grids using Syncfusion's Angular Grid component. This skill covers all aspects of grid functionality from basic data binding to advanced features like virtual scrolling, hierarchical data, state management, and multi-format exports.

本指南全面介绍如何使用Syncfusion的Angular Grid组件实现功能强大、特性丰富的数据网格，涵盖了从基本数据绑定到虚拟滚动、分层数据、状态管理和多格式导出等高级功能的所有网格功能。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Display tabular data — Load and render structured data in a table format
Enable data operations — Sort, filter, search, and paginate large datasets
Implement editing — Add, update, and delete records with validation
Customize columns — Configure column properties, templates, and layouts
Export data — Generate Excel, PDF, or print-friendly reports
Handle advanced scenarios — Hierarchical data, virtual scrolling, state persistence
Apply styling — Theme grids, customize appearance, and style-specific elements
Optimize performance — Implement infinite scrolling, virtual scrolling for large datasets

当你需要以下功能时，可以使用本技能：

展示表格数据 — 加载并以表格格式渲染结构化数据
启用数据操作 — 对大型数据集进行排序、筛选、搜索和分页
实现编辑功能 — 添加、更新和删除记录并附带验证
自定义列 — 配置列属性、模板和布局
导出数据 — 生成Excel、PDF或适合打印的报表
处理高级场景 — 分层数据、虚拟滚动、状态持久化
应用样式 — 为网格设置主题、自定义外观并为特定元素设置样式
优化性能 — 为大型数据集实现无限滚动和虚拟滚动

TreeGrid vs. Grid: Decision Guide

TreeGrid vs. Grid：选择指南

Requirement	Use TreeGrid	Use Grid
Data Structure	Hierarchical/Tree/Nested	Flat/Tabular
Parent-Child Relationships	✅ Native support	❌ No (use Detail Template)
Expand/Collapse Rows	✅ Built-in	❌ No
Nested Aggregates	✅ Includes children	✅ Flat only
Indent/Outdent Operations	✅ Yes	❌ No
Column Grouping	❌ No (use Grid)	✅ Yes
Performance (100K+ rows)	✅Excellent	✅ Excellent
Use Cases	Org charts, file systems, BoM	Orders, invoices, lists

需求	使用TreeGrid	使用Grid
数据结构	分层/树形/嵌套结构	扁平/表格结构
父子关系	✅ 原生支持	❌ 不支持（需使用详情模板）
展开/折叠行	✅ 内置功能	❌ 无
嵌套聚合	✅ 包含子项	✅ 仅支持扁平结构
缩进/取消缩进操作	✅ 支持	❌ 无
列分组	❌ 不支持（使用Grid）	✅ 支持
性能（10万+行数据）	✅ 优秀	✅ 优秀
使用场景	组织架构图、文件系统、物料清单	订单、发票、列表

Critical API Rules & Requirements

关键API规则与要求

Grid's inbuilt API (137+ methods, 65+ events, 95+ properties) requires strict adherence to access patterns:

⚠️ Detailed rules for proper API usage are located in the reference guides — review the sections below based on your needs:

📄 Method Access & Properties → references/programmatic-api.md — Learn @ViewChild requirement, method parameters, async handling, and refresh patterns
📄 Event Handling → references/events-catalog.md — Event signatures, timing, cancellation, and render event restrictions
📄 Full API Reference: references/grid-properties-methods-events.md
📄 Module System → references/modules.md — Service injection requirements for feature methods
📄 Selection → references/selection.md — Selection method prerequisites
📄 Backend Integration: references/adaptors.md

Grid的内置API（137+方法、65+事件、95+属性）要求严格遵循访问模式：

⚠️ 正确使用API的详细规则请参考参考指南 — 根据你的需求查看以下章节：

📄 方法访问与属性 → references/programmatic-api.md — 了解@ViewChild要求、方法参数、异步处理和刷新模式
📄 事件处理 → references/events-catalog.md — 事件签名、触发时机、取消操作和渲染事件限制
📄 完整API参考: references/grid-properties-methods-events.md
📄 模块系统 → references/modules.md — 功能方法的服务注入要求
📄 选择功能 → references/selection.md — 选择方法的前提条件
📄 后端集成: references/adaptors.md

Feature Navigation Guide

功能导航指南

Getting Started & Setup

入门与设置

📄 Read: references/getting-started.md

Installation and package setup
Basic grid initialization
CSS imports and themes
Minimal working example

📄 阅读: references/getting-started.md

安装和包设置
网格基本初始化
CSS导入和主题设置
最简可用示例

Data Management

数据管理

📄 Read: references/data-binding.md

Local and remote data binding
Data source configuration
API integration
Real-time data updates

📄 阅读: references/data-binding.md

本地和远程数据绑定
数据源配置
API集成
实时数据更新

Column Configuration

列配置

📄 Read: references/columns.md

Column properties and types
Column templates
Foreign key columns
Column rendering options

Related — Advanced Column Features:
📄 Read: references/context-menu.md (context menu for columns)

📄 阅读: references/columns.md

列属性和类型
列模板
外键列
列渲染选项

相关 — 高级列功能:
📄 阅读: references/context-menu.md（列的上下文菜单）

Row Management & Templates

行管理与模板

📄 Read: references/row.md

Row properties and events
Row templates
Detail row templates
Row spanning

📄 阅读: references/row.md

行属性和事件
行模板
详情行模板
行合并

Selection & Interaction

选择与交互

📄 Read: references/selection.md

Row, cell, and column selection
Checkbox selection
Selection events
Multi-select patterns

📄 阅读: references/selection.md

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

Data Operations

数据操作

📄 Read: references/filtering.md

Filter bar and filter menu
Excel-like filtering
Custom filters
Programmatic filtering

📄 Read: references/sorting.md

Single and multi-column sorting
Custom sort order
Sort events

📄 Read: references/searching.md

Global search functionality
Search across columns
Search algorithms

📄 Read: references/paging.md

Pagination setup
Page size configuration
Page change events

📄 阅读: references/filtering.md

筛选栏和筛选菜单
类Excel筛选
自定义筛选
程序化筛选

📄 阅读: references/sorting.md

单列和多列排序
自定义排序顺序
排序事件

📄 阅读: references/searching.md

全局搜索功能
跨列搜索
搜索算法

📄 阅读: references/paging.md

分页设置
页面大小配置
页面切换事件

Editing & Validation

编辑与验证

📄 Read: references/editing.md

Edit types (inline, dialog, batch)
Edit templates and custom editors
Built-in validators (required, min, max, pattern)
Validation rules and error messages
Persisting changes to server

⚠️ CRITICAL:
[isPrimaryKey]="true"
is required on the key column — editing silently fails without it (no error thrown).

📄 阅读: references/editing.md

编辑类型（内联、对话框、批量）
编辑模板和自定义编辑器
内置验证器（必填、最小值、最大值、正则）
验证规则和错误提示
将更改持久化到服务器

⚠️ 关键注意事项: 主键列必须设置
[isPrimaryKey]="true"
— 缺少该设置会导致编辑功能静默失败（无错误提示）。

Grouping & Aggregation

分组与聚合

📄 Read: references/grouping.md

Grouping columns
Lazy-load grouping
Caption templates

📄 Read: references/aggregates.md

Summary rows
Custom aggregate functions
Footer aggregates

📄 阅读: references/grouping.md

列分组
懒加载分组
标题模板

📄 阅读: references/aggregates.md

汇总行
自定义聚合函数
页脚聚合

Export & Reporting

导出与报表

📄 Read: references/excel-export.md

Export to Excel formats
Export options and customization
Export events

📄 Read: references/pdf-export.md

Export to PDF
PDF templates and formatting
Header and footer configuration

📄 Read: references/print.md

Print functionality
Print templates
Print events

📄 阅读: references/excel-export.md

导出为Excel格式
导出选项和自定义
导出事件

📄 阅读: references/pdf-export.md

导出为PDF
PDF模板和格式设置
页眉和页脚配置

📄 阅读: references/print.md

打印功能
打印模板
打印事件

Styling & UI Customization

样式与UI自定义

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

Theme selection
CSS customization
Style specific areas (header, rows, cells)
Custom CSS classes

📄 Read: references/toolbar.md

Toolbar items and configuration
Custom toolbar buttons
Toolbar events and click handlers

📄 Read: references/clipboard.md

Copy/paste functionality
Clipboard events
Clipboard selection management

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

主题选择
CSS自定义
为特定区域设置样式（页眉、行、单元格）
自定义CSS类

📄 阅读: references/toolbar.md

工具栏项和配置
自定义工具栏按钮
工具栏事件和点击处理程序

📄 阅读: references/clipboard.md

复制/粘贴功能
剪贴板事件
剪贴板选择管理

Advanced Column Features

高级列功能

📄 Read: references/frozen.md

Freeze columns
Multi-column freeze
Freeze position configuration

⚠️ Performance Warning:
rowDataBound
and
queryCellInfo
fire on every render/scroll — NEVER make API calls inside them. ⚠️ Conflict Risk: Do NOT add both a column
[template]
AND a
rowDataBound
handler targeting the same field — produces duplicate, conflicting styling.

📄 阅读: references/frozen.md

冻结列
多列冻结
冻结位置配置

⚠️ 性能警告:
rowDataBound
和
queryCellInfo
会在每次渲染/滚动时触发 — 绝对不要在其中调用API。 ⚠️ 冲突风险: 不要同时为同一字段设置列
[template]
和
rowDataBound
处理程序 — 会导致重复且冲突的样式。

Cell & Row Features

单元格与行功能

📄 Read: references/cell.md

Cell editing and selection
Cell templates
Cell spanning
Cell-level events

📄 阅读: references/cell.md

单元格编辑和选择
单元格模板
单元格合并
单元格级事件

Context & Interaction

上下文与交互

📄 Read: references/context-menu.md

Context menu items
Custom context menu
Context menu events
Default menu configuration

📄 阅读: references/context-menu.md

上下文菜单项
自定义上下文菜单
上下文菜单事件
默认菜单配置

Advanced Features

高级功能

📄 Read: references/scrolling.md

Virtual scrolling for 1K–100K+ records
Infinite scrolling for continuous loading
Sticky headers
Scrolling performance optimization

⚠️ CRITICAL:
height
is required — scrolling is silently disabled without it (no error thrown). ⚠️ INCOMPATIBLE: Do NOT combine
enableVirtualization
or
enableInfiniteScrolling
with
allowPaging
— results are unpredictable.

Rows	Mode	Key Config
< 1,000	`allowPaging`	`Page` module
1K – 100K	`enableVirtualization` + `height`	`VirtualScroll` , no paging
Continuous	`enableInfiniteScrolling` + `height`	`InfiniteScroll`
100K+ grouped	`enableVirtualization` + `lazyLoadGrouping`	`VirtualScroll` , `Group`

📄 Read: references/hierarchy-grid.md

Master-detail grids
Child grid configuration
Nested/hierarchical data
Detail row templates
Lazy-load child data

📄 Read: references/state-management.md

Save grid state (columns, sorting, filters)
Restore grid state
State persistence options

📄 Read: references/adaptive.md

Responsive/mobile mode
Adaptive layouts
Touch interactions

📄 Read: references/global-local.md

Keyboard shortcuts and navigation
Global vs local settings
Accessibility configurations

📄 阅读: references/scrolling.md

为1K–100K+条记录实现虚拟滚动
为持续加载实现无限滚动
粘性页眉
滚动性能优化

⚠️ 关键注意事项: 必须设置
height
— 缺少该设置会导致滚动功能静默禁用（无错误提示）。 ⚠️ 不兼容: 不要同时使用
enableVirtualization
或
enableInfiniteScrolling
与
allowPaging
— 结果不可预测。

行数	模式	核心配置
< 1,000	`allowPaging`	`Page` 模块
1K – 100K	`enableVirtualization` + `height`	`VirtualScroll` ，禁用分页
持续加载	`enableInfiniteScrolling` + `height`	`InfiniteScroll`
100K+分组数据	`enableVirtualization` + `lazyLoadGrouping`	`VirtualScroll` , `Group`

📄 阅读: references/hierarchy-grid.md

主-详情网格
子网格配置
嵌套/分层数据
详情行模板
懒加载子数据

📄 阅读: references/state-management.md

保存网格状态（列、排序、筛选）
恢复网格状态
状态持久化选项

📄 阅读: references/adaptive.md

响应式/移动端模式
自适应布局
触摸交互

📄 阅读: references/global-local.md

键盘快捷键和导航
全局与本地设置
无障碍配置

Module System & Architecture

模块系统与架构

📄 Read: references/modules.md

Grid module architecture and 23+ feature services
Service dependencies and relationships
Module injection patterns in component decorators
Bundle optimization via selective imports
Performance impact of module inclusion

📄 阅读: references/modules.md

网格模块架构和23+功能服务
服务依赖关系
组件装饰器中的模块注入模式
通过选择性导入优化包体积
模块引入对性能的影响

Data Connectivity & Adaptors

数据连接与适配器

📄 Read: references/adaptors.md

7 adaptor types for backend integration
UrlAdaptor, ODataV4Adaptor, WebApiAdaptor, GraphQLAdaptor
Custom adaptors and RemoteSaveAdaptor
Backend configuration examples (C#, Node.js)
Request/response format specifications
Error handling and adaptor comparison

📄 阅读: references/adaptors.md

7种用于后端集成的适配器类型
UrlAdaptor、ODataV4Adaptor、WebApiAdaptor、GraphQLAdaptor
自定义适配器和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 and monitoring

📄 阅读: 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 (axe, NVDA, JAWS)
Semantic HTML practices

📄 阅读: references/accessibility.md

符合WCAG 2.2和Section 508标准
WAI-ARIA实现和屏幕阅读器支持
键盘导航（Tab、方向键、Enter、Escape）
颜色对比度和焦点管理
无障碍测试工具（axe、NVDA、JAWS）
语义化HTML实践

Data Validation

数据验证

📄 Read: references/validation.md

Built-in validators (required, min, max, pattern)
Custom validation functions
Async validation with server checks
Validation events and error display
Server-side validation with ASP.NET
Validation rules by column type

📄 阅读: references/validation.md

内置验证器（必填、最小值、最大值、正则）
自定义验证函数
与服务器校验结合的异步验证
验证事件和错误展示
基于ASP.NET的服务端验证
按列类型设置验证规则

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/responsive-design.md

Adaptive UI for mobile/tablet/desktop
Responsive media queries and breakpoints
Column visibility hiding rules
Touch interactions (swipe, long-press)
Mobile optimization strategies
Device-specific styling patterns

📄 阅读: references/responsive-design.md

适配移动端/平板/桌面端的自适应UI
响应式媒体查询和断点
列可见性隐藏规则
触摸交互（滑动、长按）
移动端优化策略
设备特定样式模式

Programmatic Control

程序化控制

📄 Read: references/programmatic-api.md

The full programmatic method catalog
Event prop reference
Dynamic column control
```
setProperties()
```
examples, export hooks, and cross-feature

📄 阅读: references/programmatic-api.md

完整的程序化方法目录
事件属性参考
动态列控制
```
setProperties()
```
示例、导出钩子和跨功能操作

Event Communication

事件通信

📄 Read: references/events-catalog.md

Wire

actionBegin

to cancel or mutate before an action (

args.cancel = true

args.data.field = value

)

Wire
```
actionComplete
```
to react after (API call, toast, refresh, toolbar restore)
Must wire
```
actionFailure
```
for error handling
Use
```
args.requestType
```
to identify the action, see the requestType table in the events catalog

📄 阅读: references/events-catalog.md

绑定

actionBegin

以取消或在操作前修改（

args.cancel = true

args.data.field = value

）

绑定
```
actionComplete
```
以在操作后响应（API调用、提示、刷新、工具栏恢复）
必须绑定
```
actionFailure
```
以处理错误
使用
```
args.requestType
```
识别操作类型，请查看事件目录中的requestType表格

Advanced Tutorials & Real-World Patterns

高级教程与实战模式

📄 Read: references/advanced-tutorials.md

Real-time data updates (WebSocket, SignalR)
Master-detail with filtering
Complex calculations and running totals
Advanced filtering with complex predicates
Custom themes and theme switching
Performance monitoring techniques
Unit and integration testing strategies

📄 阅读: references/advanced-tutorials.md

实时数据更新（WebSocket、SignalR）
带筛选的主-详情网格
复杂计算和累计总计
带复杂谓词的高级筛选
自定义主题和主题切换
性能监控技术
单元测试和集成测试策略

Quick Start Example

快速开始示例

typescript

import { Component, OnInit } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

interface Employee {
  EmployeeID: number;
  FirstName: string;
  LastName: string;
  Title: string;
  HireDate: Date;
  ReportsTo: number;
  Salary: number;
}

@Component({
  selector: 'app-grid',
  template: `
    <ejs-grid [dataSource]="data" [allowPaging]="true" 
              [pageSettings]="{ pageSize: 12 }"
              [allowSorting]="true" 
              [allowFiltering]="true">
      <e-columns>
        <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
        <e-column field="FirstName" headerText="First Name" width="120"></e-column>
        <e-column field="LastName" headerText="Last Name" width="120"></e-column>
        <e-column field="Title" headerText="Title" width="150"></e-column>
        <e-column field="HireDate" headerText="Hire Date" type="date" 
                  format="yMd" width="130"></e-column>
        <e-column field="Salary" headerText="Salary" type="number" 
                  format="C2" width="120"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class GridComponent implements OnInit {
  data: Employee[] = [];

  ngOnInit() {
    this.loadEmployeeData();
  }

  loadEmployeeData() {
    // Load your data here
    this.data = [
      { EmployeeID: 1, FirstName: 'Nancy', LastName: 'Davolio', Title: 'Sales Representative', 
        HireDate: new Date(1992, 4, 1), ReportsTo: 2, Salary: 60000 },
      { EmployeeID: 2, FirstName: 'Andrew', LastName: 'Fuller', Title: 'Vice President Sales', 
        HireDate: new Date(1992, 8, 14), ReportsTo: null, Salary: 97000 },
      // ... more data
    ];
  }
}

typescript

import { Component, OnInit } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

interface Employee {
  EmployeeID: number;
  FirstName: string;
  LastName: string;
  Title: string;
  HireDate: Date;
  ReportsTo: number;
  Salary: number;
}

@Component({
  selector: 'app-grid',
  template: `
    <ejs-grid [dataSource]="data" [allowPaging]="true" 
              [pageSettings]="{ pageSize: 12 }"
              [allowSorting]="true" 
              [allowFiltering]="true">
      <e-columns>
        <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
        <e-column field="FirstName" headerText="名字" width="120"></e-column>
        <e-column field="LastName" headerText="姓氏" width="120"></e-column>
        <e-column field="Title" headerText="职位" width="150"></e-column>
        <e-column field="HireDate" headerText="入职日期" type="date" 
                  format="yMd" width="130"></e-column>
        <e-column field="Salary" headerText="薪资" type="number" 
                  format="C2" width="120"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class GridComponent implements OnInit {
  data: Employee[] = [];

  ngOnInit() {
    this.loadEmployeeData();
  }

  loadEmployeeData() {
    // 在此处加载数据
    this.data = [
      { EmployeeID: 1, FirstName: 'Nancy', LastName: 'Davolio', Title: '销售代表', 
        HireDate: new Date(1992, 4, 1), ReportsTo: 2, Salary: 60000 },
      { EmployeeID: 2, FirstName: 'Andrew', LastName: 'Fuller', Title: '销售副总裁', 
        HireDate: new Date(1992, 8, 14), ReportsTo: null, Salary: 97000 },
      // ... 更多数据
    ];
  }
}

Common Patterns

常见模式

Pattern 1: Data Grid with Sorting, Filtering, and Paging

模式1：带排序、筛选和分页的数据网格

Combine sorting, filtering, and paging for a complete data exploration experience:

typescript

<ejs-grid [dataSource]="data" 
          [allowSorting]="true" 
          [allowFiltering]="true" 
          [allowPaging]="true"
          [pageSettings]="{ pageSize: 20 }">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
    <e-column field="FirstName" headerText="First Name" width="120"></e-column>
    <!-- more columns -->
  </e-columns>
</ejs-grid>

结合排序、筛选和分页功能，实现完整的数据探索体验：

typescript

<ejs-grid [dataSource]="data" 
          [allowSorting]="true" 
          [allowFiltering]="true" 
          [allowPaging]="true"
          [pageSettings]="{ pageSize: 20 }">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" width="100"></e-column>
    <e-column field="FirstName" headerText="名字" width="120"></e-column>
    <!-- 更多列 -->
  </e-columns>
</ejs-grid>

Pattern 2: Inline Editing with Validation

模式2：带验证的内联编辑

Enable inline editing with form validation:

typescript

<ejs-grid [dataSource]="data" 
          [editSettings]="{ allowEditing: true, allowAdding: true, mode: 'Normal' }"
          [toolbar]="['Add', 'Edit', 'Delete', 'Update', 'Cancel']">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" [isPrimaryKey]="true" 
              width="100"></e-column>
    <e-column field="FirstName" headerText="First Name" 
              [validationRules]="{ required: true }" width="120"></e-column>
    <!-- more columns -->
  </e-columns>
</ejs-grid>

启用带表单验证的内联编辑：

typescript

<ejs-grid [dataSource]="data" 
          [editSettings]="{ allowEditing: true, allowAdding: true, mode: 'Normal' }"
          [toolbar]="['Add', 'Edit', 'Delete', 'Update', 'Cancel']">
  <e-columns>
    <e-column field="EmployeeID" headerText="ID" [isPrimaryKey]="true" 
              width="100"></e-column>
    <e-column field="FirstName" headerText="名字" 
              [validationRules]="{ required: true }" width="120"></e-column>
    <!-- 更多列 -->
  </e-columns>
</ejs-grid>

Pattern 3: Exporting to PDF and Excel

模式3：导出为PDF和Excel

Enable both PDF and Excel exports with toolbar:

typescript

<ejs-grid [dataSource]="data" 
          [toolbar]="['PdfExport', 'ExcelExport']"
          [allowPdfExport]='true'
          [allowExcelExport]='true'
          (toolbarClick)='toolbarClick($event)'>
  <e-columns>
    <!-- your columns -->
  </e-columns>
</ejs-grid>

通过工具栏启用PDF和Excel导出：

typescript

<ejs-grid [dataSource]="data" 
          [toolbar]="['PdfExport', 'ExcelExport']"
          [allowPdfExport]='true'
          [allowExcelExport]='true'
          (toolbarClick)='toolbarClick($event)'>
  <e-columns>
    <!-- 你的列 -->
  </e-columns>
</ejs-grid>

Pattern 4: Virtual Scrolling for Large Datasets

模式4：针对大型数据集的虚拟滚动

Optimize performance with virtual scrolling:

typescript

<ejs-grid [dataSource]="largeDataset" 
          [enableVirtualization]="true"
          [pageSettings]="{ pageSize: 50 }">
  <e-columns>
    <!-- your columns -->
  </e-columns>
</ejs-grid>

通过虚拟滚动优化性能：

typescript

<ejs-grid [dataSource]="largeDataset" 
          [enableVirtualization]="true"
          [pageSettings]="{ pageSize: 50 }">
  <e-columns>
    <!-- 你的列 -->
  </e-columns>
</ejs-grid>

Key Props & Configuration

核心属性与配置

Property	Type	Purpose	Common Values
`dataSource`	Array/DataManager	Grid data	Employee[], RemoteDataBinding
`allowSorting`	boolean	Enable sorting	true, false
`allowFiltering`	boolean	Enable filtering	true, false
`allowPaging`	boolean	Enable pagination	true, false
`allowGrouping`	boolean	Enable grouping	true, false
`editSettings`	object	Edit configuration	{ mode: 'Inline' }
`pageSettings`	object	Paging options	{ pageSize: 12 }
`enableVirtualization`	boolean	Virtual scrolling	true, false
`allowExcelExport`	boolean	Excel export	true, false
`allowPdfExport`	boolean	PDF export	true, false
`toolbar`	array	Toolbar items	['Add', 'Edit', 'Delete']
`columns`	array	Column definitions	[{ field, headerText }]
`height`	string/number	Grid height	'400px', 'auto'

属性	类型	用途	常见值
`dataSource`	Array/DataManager	网格数据	Employee[], RemoteDataBinding
`allowSorting`	boolean	启用排序	true, false
`allowFiltering`	boolean	启用筛选	true, false
`allowPaging`	boolean	启用分页	true, false
`allowGrouping`	boolean	启用分组	true, false
`editSettings`	object	编辑配置	{ mode: 'Inline' }
`pageSettings`	object	分页选项	{ pageSize: 12 }
`enableVirtualization`	boolean	虚拟滚动	true, false
`allowExcelExport`	boolean	Excel导出	true, false
`allowPdfExport`	boolean	PDF导出	true, false
`toolbar`	array	工具栏项	['Add', 'Edit', 'Delete']
`columns`	array	列定义	[{ field, headerText }]
`height`	string/number	网格高度	'400px', 'auto'

Common Use Cases

常见使用场景

Scenario 1: Employee Directory Implement a searchable, sortable, filterable employee list with details on demand.
→ Combine: getting-started + data-binding + columns + selection + hierarchy-grid

Scenario 2: Data Entry Form Build a grid for adding and editing records with validation.
→ Combine: editing + validation + toolbar + filtering

Scenario 3: Sales Report Dashboard Create a highly customized grid with grouping, aggregates, and PDF export.
→ Combine: grouping + aggregates + pdf-export + style-and-appearance

Scenario 4: Real-time Data Monitor Display streaming data with virtual scrolling and state persistence.
→ Combine: scrolling + state-management + data-binding + adaptive

Scenario 5: Multi-level Organization Chart Show hierarchical org structure with detail rows for each level.
→ Combine: hierarchy-grid + row templates + cell styling

场景1：员工目录 实现可搜索、排序、筛选的员工列表，并支持按需查看详情。
→ 组合使用：入门指南 + 数据绑定 + 列配置 + 选择功能 + 分层网格

场景2：数据录入表单 构建用于添加和编辑记录并附带验证的网格。
→ 组合使用：编辑功能 + 验证 + 工具栏 + 筛选

场景3：销售报表仪表板 创建高度自定义的网格，支持分组、聚合和PDF导出。
→ 组合使用：分组 + 聚合 + PDF导出 + 样式与外观

场景4：实时数据监控 展示流数据并支持虚拟滚动和状态持久化。
→ 组合使用：滚动功能 + 状态管理 + 数据绑定 + 自适应布局

场景5：多级组织架构图 展示分层组织架构，并为每个层级提供详情行。
→ 组合使用：分层网格 + 行模板 + 单元格样式

syncfusion-angular-grid

Original

Translation

Syncfusion Angular Grid

Syncfusion Angular Grid 综合指南

Table of Contents

目录

When to Use This Skill

何时使用本技能

TreeGrid vs. Grid: Decision Guide

TreeGrid vs. Grid：选择指南

Critical API Rules & Requirements

关键API规则与要求

Feature Navigation Guide

功能导航指南

Getting Started & Setup

入门与设置

Data Management

数据管理

Column Configuration

列配置

Row Management & Templates

行管理与模板

Selection & Interaction

选择与交互

Data Operations

数据操作

Editing & Validation

编辑与验证

Grouping & Aggregation

分组与聚合

Export & Reporting

导出与报表

Styling & UI Customization

样式与UI自定义

Advanced Column Features

高级列功能

Cell & Row Features

单元格与行功能

Context & Interaction

上下文与交互

Advanced Features

高级功能

Module System & Architecture

模块系统与架构

Data Connectivity & Adaptors

数据连接与适配器

Performance Optimization

性能优化

Accessibility & Compliance

无障碍与合规

Data Validation

数据验证

Command Column & Row Actions

命令列与行操作

Localization & Internationalization

本地化与国际化

Responsive Design & Mobile

响应式设计与移动端适配

Programmatic Control

程序化控制

Event Communication

事件通信

Advanced Tutorials & Real-World Patterns

高级教程与实战模式

Quick Start Example

快速开始示例

Common Patterns

常见模式

Pattern 1: Data Grid with Sorting, Filtering, and Paging

模式1：带排序、筛选和分页的数据网格

Pattern 2: Inline Editing with Validation

模式2：带验证的内联编辑

Pattern 3: Exporting to PDF and Excel

模式3：导出为PDF和Excel

Pattern 4: Virtual Scrolling for Large Datasets

模式4：针对大型数据集的虚拟滚动

Key Props & Configuration

核心属性与配置

Common Use Cases