syncfusion-angular-grid

What this skill does

# 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.

## ⚠️ 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](#when-to-use-this-skill)
- [TreeGrid vs. Grid: Decision Guide](#treegrid-vs-grid-decision-guide)
- [Critical API Rules & Requirements](#critical-api-rules--requirements)
- [Feature Navigation Guide](#feature-navigation-guide)
- [Quick Start Example](#quick-start-example)
- [Common Patterns](#common-patterns)
- [Key Props & Configuration](#key-props--configuration)
- [Common Use Cases](#common-use-cases)

## 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

## TreeGrid vs. Grid: Decision Guide
 
| 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 |

## Critical API Rules & Requirements

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:

- 📄 **Properties Reference** → [references/grid-properties.md](references/grid-properties.md) — 95+ configurable properties organized by category
- 📄 **Methods Reference** → [references/grid-methods.md](references/grid-methods.md) — 137+ methods for data manipulation, selection, sorting, filtering, and more
- 📄 **Events Reference** → [references/grid-events.md](references/grid-events.md) — 65+ events for lifecycle management, user interactions, and data changes
- 📄 **Programmatic Control** → [references/programmatic-api.md](references/programmatic-api.md) — Learn @ViewChild requirement, method parameters, async handling, and refresh patterns
- 📄 **Event Handling** → [references/events-catalog.md](references/events-catalog.md) — Event signatures, timing, cancellation, and render event restrictions
- 📄 **Module System** → [references/modules.md](references/modules.md) — Service injection requirements for feature methods
- 📄 **Selection** → [references/selection.md](references/selection.md) — Selection method prerequisites 
- 📄 **Backend Integration** → [references/adaptors.md](references/adaptors.md)

---

## Feature Navigation Guide

### Getting Started & Setup
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup
- Basic grid initialization
- CSS imports and themes
- Minimal working example

### Data Management
📄 **Read:** [references/data-binding.md](references/data-binding.md)
- Local and remote data binding
- Data source configuration
- API integration
- Real-time data updates

### Column Configuration
📄 **Read:** [references/columns.md](references/columns.md)
- Column properties and types
- Column templates
- Foreign key columns
- Column rendering options

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

### Row Management & Templates
📄 **Read:** [references/row.md](references/row.md)
- Row properties and events
- Row templates
- Detail row templates
- Row spanning

### Selection & Interaction
📄 **Read:** [references/selection.md](references/selection.md)
- Row, cell, and column selection
- Checkbox selection
- Selection events
- Multi-select patterns

### Data Operations
📄 **Read:** [references/filtering.md](references/filtering.md)
- Filter bar and filter menu
- Excel-like filtering
- Custom filters
- Programmatic filtering

📄 **Read:** [references/sorting.md](references/sorting.md)
- Single and multi-column sorting
- Custom sort order
- Sort events

📄 **Read:** [references/searching.md](references/searching.md)
- Global search functionality
- Search across columns
- Search algorithms

📄 **Read:** [references/paging.md](references/paging.md)
- Pagination setup
- Page size configuration
- Page change events

### Editing & Validation
📄 **Read:** [references/editing.md](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).

### Grouping & Aggregation
📄 **Read:** [references/grouping.md](references/grouping.md)
- Grouping columns
- Lazy-load grouping
- Caption templates

📄 **Read:** [references/aggregates.md](references/aggregates.md)
- Summary rows
- Custom aggregate functions
- Footer aggregates

### Export & Reporting
📄 **Read:** [references/excel-export.md](references/excel-export.md)
- Export to Excel formats
- Export options and customization
- Export events

📄 **Read:** [references/pdf-export.md](references/pdf-export.md)
- Export to PDF
- PDF templates and formatting
- Header and footer configuration

📄 **Read:** [references/print.md](references/print.md)
- Print functionality
- Print templates
- Print events

### Styling & UI Customization
📄 **Read:** [references/style-and-appearance.md](references/style-and-appearance.md)
- Theme selection
- CSS customization
- Style specific areas (header, rows, cells)
- Custom CSS classes

📄 **Read:** [references/toolbar.md](references/tool-bar.md)
- Toolbar items and configuration
- Custom toolbar buttons
- Toolbar events and click handlers

📄 **Read:** [references/clipboard.md](references/clipboard.md)
- Copy/paste functionality
- Clipboard events
- Clipboard selection management

### Advanced Column Features
📄 **Read:** [references/frozen.md](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.

### Cell & Row Features
📄 **Read:** [references/cell.md](references/cell.md)
- Cell editing and selection
- Cell templates
- Cell spanning
- Cell-level events

### Context & Interaction
📄 **Read:** [references/context-menu.md](references/context-menu.md)
- Context menu items
- Custom context menu
- Context menu events
- Default menu configuration

### Advanced Features
📄 **Read:** [references/scrolling.md](references/scrolling.md)
- Virtual scrolling for 1K–100K+ records
- Infin