syncfusion-angular-treegrid

What this skill does

# Syncfusion Angular TreeGrid

Complete guide to implementing and customizing the Syncfusion Angular TreeGrid component for hierarchical data visualization.

## ⚠️ Security & Trust Boundary
 
- The TreeGrid 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)
- [Data Structure Rules](#data-structure-rules)
- [Documentation Navigation Guide](#documentation-navigation-guide)
- [Quick Start Example](#quick-start-example)
- [Common Patterns](#common-patterns)
- [Best Practices](#best-practices)
- [Key Props Summary](#key-props-summary)
- [Module Injection](#module-injection)

## When to Use This Skill

Use this skill when you need to:
- Display hierarchical or tree-structured data in a grid format
- Implement advanced data manipulation (sorting, filtering, searching, editing)
- Configure pagination, virtual scrolling for large datasets
- Add export functionality (PDF, Excel)
- Customize appearance with themes and CSS
- Handle selection, aggregates, and state management
- Support mobile/responsive design
- Implement row/column freezing

## Data Structure Rules

### Rule 1: childMapping is MANDATORY for Hierarchical Data

**Severity**: 🔴 CRITICAL - Grid will not expand/collapse without this

**Requirement**:
```typescript
// ✅ REQUIRED - Must match data property name exactly
<ejs-treegrid 
  [dataSource]='data'
  childMapping='subtasks'>  // Property name is case-sensitive
</ejs-treegrid>

// ❌ WRONG - Will not work
<ejs-treegrid 
  [dataSource]='data'>
  <!-- No expansion possible without childMapping -->
</ejs-treegrid>
```

**Data Format**:
```typescript
// ✅ CORRECT - childMapping matches 'subtasks' property
public data = [
  {
    TaskID: 1,
    TaskName: 'Parent',
    subtasks: [  // Must match childMapping value
      { TaskID: 2, TaskName: 'Child' }
    ]
  }
];
```

**Exception**: Use `idMapping` + `parentIdMapping` for flat parent-child structure:
```typescript
// Alternative: Flat structure with parent IDs
<ejs-treegrid 
  [dataSource]='flatData'
  idMapping='TaskID'
  parentIdMapping='ParentID'
  hasChildMapping='isParent'>
</ejs-treegrid>
```

### Rule 2: Data Type Matching is MANDATORY
**Severity**: 🟠 IMPORTANT - Type mismatches cause rendering/sorting issues

**Requirement**:
```typescript
// ✅ CORRECT - Type matches column definition
public data = [
  {
    TaskID: 1,              // number type
    TaskName: 'Planning',   // string type
    StartDate: new Date(),  // Date object for date columns
  }
];

// Column definition must match data types
<e-columns>
  <e-column field='TaskID' headerText='ID' type='number'></e-column>
  <e-column field='TaskName' headerText='Task' type='text'></e-column>
  <e-column field='StartDate' headerText='Date' type='date' format='yMd'></e-column>
</e-columns>

// ❌ WRONG - Type mismatch
public data = [
  {
    TaskID: '1',            // String instead of number
    StartDate: '02/03/2024' // String instead of Date object
  }
];
```

## Documentation Navigation Guide

### Getting Started & Setup

📄 **Read:** [references/getting-started-guide.md](references/getting-started-guide.md)
- Complete installation and setup
- Module configuration
- Project initialization
- First TreeGrid component


### API Quick Reference

📄 **Read:** [references/properties.md](references/properties.md)
- 70+ properties in organized tables
- Data binding, display, behavior, features
- Settings objects and modules
- Column properties quick reference

📄 **Read:** [references/methods.md](references/methods.md)
- 60+ methods in organized tables
- Data management, selection, expand/collapse
- Filtering, sorting, export, editing
- DOM access and utility methods

📄 **Read:** [references/events.md](references/events.md)
- 56+ events in organized tables
- Cancelable events and async patterns
- Data, action, selection, edit events
- Export, print, and query events

**Recommended** for developers who need quick property/method/event lookup

### Data Binding

📄 **Read:** [references/data-binding.md](references/data-binding.md)
- Local and remote data binding
- ORM and custom adaptor implementation
- Loading data from various sources

### Adaptors for Remote Data
📄 **Read:** [references/adaptors.md](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

### Observables Data
📄 **Read:** [references/observables.md](references/observables.md)
- RxJS observables integration
- Async data binding patterns
- Observable-based event handling
- Async operators and pipelines

### Column Configuration

📄 **Read:** [references/column.md](references/column.md)
- Column definition and width management
- Custom column templates and rendering
- Column reordering and freezing

### Column Spanning
📄 **Read:** [references/column-spanning.md](references/column-spanning.md)
- Multi-column spanning configuration
- Cell spanning across columns
- Dynamic span calculation

### Command Columns
📄 **Read:** [references/command-column.md](references/command-column.md)
- Command column with action buttons
- Edit, Delete, and Cancel buttons
- Custom command implementations

### Column Menu
📄 **Read:** [references/column-menu.md](references/column-menu.md)
- Column header context menu
- Sort, group, and filter menu items
- Custom column menu options

### Column Chooser
📄 **Read:** [references/column-chooser.md](references/column-chooser.md)
- Column visibility toggle UI
- Show/hide columns dynamically
- Column chooser dialog configuration

### Row Configuration
📄 **Read:** [references/row.md](references/row.md)
- Row templates and detail rows
- Row drag-drop functionality
- Row spanning and customization

### Cell-Level Features
📄 **Read:** [references/cell.md](references/cell.md)
- Cell styling and formatting
- Cell templates and tooltips
- Custom CSS and HTML content

### Module System & Architecture
📄 **Read:** [references/modules.md](references/modules.md)
- Module imports and dependencies
- Required service providers
- Angular version compatibility
- Library setup and initialization

### Editing
📄 **Read:** [references/editing.md](references/editing.md)
- Cell, inline, dialog, row, and batch editing
- Data validation and error handling
- Custom editors and validation rules

### Sorting
📄 **Read:** [references/sorting.md](references/sorting.md)
- Single and multi-column sorting
- Custom sort comparers
- Sort order and keyboard navigation

### Filtering
📄 **Read:** [references/filtering.md](references/filtering.md)
- Filter bar and menu modes
- Excel-like filtering
- Custom filters and predicates

### Searching
📄 **Read:** [references/searching.md](references/searching.md)
- Global and column-level search
- Case-sensitive searching
- Text highlighting

### Selection
📄 **Read:** [references/selection.md](references/selection.md)
- Row, cell, and checkbox selection modes
- Selection events and APIs
- Programmatic selection

### Paging
📄 **Read:** [references/paging.md](references/paging.md)
- Pagination configuration
- Server-side paging
- Page navigation APIs

### Scrolling
📄 **Read:** [references/scrolling.md](references/scrolling.md)
- Virtual scrolling for large datasets
- Infinite scroll and lazy loading
- Height/width management and scroll positioning

### Frozen Columns
📄 **Read:** [references/frozen-columns.md](references/frozen-columns.md)
- Freeze rows and columns
- Fixed visibility configuration
- Performance optimization

### Aggregations
📄 **Read:** [references/aggregates.md](references/aggregates.md)
- Summary calculations (Sum, Avg, Min, Max, Count)
- Footer templates and child aggregates
- Aggregate events

### Export & Pr