Syncfusion Angular TreeGrid

Table of Contents

• When to Use This Skill
• Data Structure Rules
• Documentation Navigation Guide
• Quick Start Example
• Common Patterns
• Best Practices
• Key Props Summary
• Module Injection

When to Use This Skill

• 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

Mandatory Rules

Rule 1: childMapping is MANDATORY for Hierarchical Data

// ✅ 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>

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

idMapping

parentIdMapping

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

// ✅ 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
  }
];

Inbuilt properties, events and Methods

• Complete property reference
• Methods and events documentation
• Column and editing interfaces
• Common data structures

Documentation Navigation Guide

Getting Started & Setup

• Complete installation and setup
• Module configuration
• Project initialization
• First TreeGrid component

Data Management

• Local and remote data binding
• ORM and custom adaptor implementation
• Loading data from various sources

• RxJS observables integration
• Async data binding patterns
• Observable-based event handling
• Async operators and pipelines

• Server-side data persistence
• CRUD operation management
• Batch operations and transactions
• Offline sync patterns

Column Configuration

• Column definition and width management
• Custom column templates and rendering
• Column reordering and freezing

Column Spanning

• Multi-column spanning configuration
• Cell spanning across columns
• Dynamic span calculation

Command Columns

• Command column with action buttons
• Edit, Delete, and Cancel buttons
• Custom command implementations

Column Menu

• Column header context menu
• Sort, group, and filter menu items
• Custom column menu options

Column Chooser

• Column visibility toggle UI
• Show/hide columns dynamically
• Column chooser dialog configuration

Row Configuration

• Row templates and detail rows
• Row drag-drop functionality
• Row spanning and customization

Cell-Level Features

• Cell styling and formatting
• Cell templates and tooltips
• Custom CSS and HTML content

Module System & Architecture

• Module imports and dependencies
• Required service providers
• Angular version compatibility
• Library setup and initialization

Editing

• Cell, inline, dialog, row, and batch editing
• Data validation and error handling
• Custom editors and validation rules

Sorting

• Single and multi-column sorting
• Custom sort comparers
• Sort order and keyboard navigation

Filtering

• Filter bar and menu modes
• Excel-like filtering
• Custom filters and predicates

Searching

• Global and column-level search
• Case-sensitive searching
• Text highlighting

Selection

• Row, cell, and checkbox selection modes
• Selection events and APIs
• Programmatic selection

Paging

• Pagination configuration
• Server-side paging
• Page navigation APIs

Scrolling

• Virtual scrolling for large datasets
• Infinite scroll and lazy loading
• Height/width management and scroll positioning

Frozen Columns

• Freeze rows and columns
• Fixed visibility configuration
• Performance optimization

Aggregations

• Summary calculations (Sum, Avg, Min, Max, Count)
• Footer templates and child aggregates
• Aggregate events

Export & Print

• Print functionality and modes
• Page setup and column visibility
• Custom print templates

• PDF export with styling
• Headers, footers, and watermarks
• Server-side export

• Excel export configuration
• Cell styling and formatting
• Merged cells and custom data

• CSV export configuration
• Custom data formatting for export
• Dynamic file naming
• Export events and callbacks
• Selected records export

User Interface & Interaction

• Built-in toolbar items
• Custom toolbar items and alignment
• Toolbar event handling

• Copy/paste operations
• Custom clipboard formats
• Clipboard event handling

• Context menu configuration
• Built-in and custom menu items
• Menu event handling

Appearance & Responsiveness

• Responsive and adaptive design
• Mobile optimization
• Breakpoints and device detection

• Built-in themes (Material, Bootstrap, Fabric, Tailwind)
• CSS customization and overrides
• Row/cell conditional styling

Performance

• Virtual scrolling and lazy loading
• Pagination for large datasets
• Column virtualization and rendering optimization
• Query optimization strategies

State Management

• Save and restore grid state
• LocalStorage integration
• Custom state management

Foreign-key

• Foreign key column configuration
• Display text mapping for FK values
• Dropdown editors for FK fields
• Cascading foreign key relationships
• Remote data binding for FK data

Row Drag and Drop

• Hierarchical drag-and-drop operations
• Parent-child relationship updates
• Circular hierarchy prevention
• Drop event validation and constraints
• Visual feedback during drag operations

Custom Editors

• Custom editor component creation
• Editor lifecycle management
• Validation in custom editors
• Custom editor templates
• Complex data input patterns

Validation

• Built-in and custom validation rules
• Async validation against server
• Cross-field validation patterns
• Server-side validation strategies
• Error display and highlighting
• Conditional validation rules

Globalization

• Localization and language support
• RTL (Right-to-Left) support
• Cultural formatting and date/number formats

Loading Animation

• Loading spinner configuration
• Custom loading templates
• Loading animation customization

Accessibility & Compliance

• WCAG 2.1 Level AA conformance
• ARIA labels and attributes
• Keyboard navigation and screen reader support
• Focus management and visual indicators
• Accessibility testing guidance

Quick Start Example

import { Component, ViewChild } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService, EditService } from '@syncfusion/ej2-angular-treegrid';

@Component({
  selector: 'app-treegrid',
  template: `
    <ejs-treegrid 
      #treegrid
      [dataSource]='data'
      [childMapping]='childMapping'
      [allowPaging]='true'
      [allowSorting]='true'
      [allowFiltering]='true'
      <e-columns>
        <e-column field='TaskID' headerText='Task ID' width='90' isPrimaryKey='true'></e-column>
        <e-column field='TaskName' headerText='Task Name' width='200'></e-column>
      </e-columns>
    </ejs-treegrid>
  `,
  providers: [PageService, SortService, FilterService, EditService]
})
export class AppComponent {
  @ViewChild('treegrid') treegrid!: TreeGridComponent;

  public data: Object[] = [
    {
      TaskID: 1,
      TaskName: 'Planning',
      subtasks: [
        { TaskID: 2, TaskName: 'Scope', Duration: 4, Progress: 100 },
        { TaskID: 3, TaskName: 'Budget', Duration: 4, Progress: 100 }
      ]
    }
  ];
  
  public childMapping: string = 'subtasks';
  
  public editSettings = { mode: 'Cell', allowEditing: true, allowDeleting: true, allowAdding: true };
}

Best Practices

1. Performance Optimization
   • Use virtual scrolling for large datasets (10,000+ records)
   • Implement server-side operations (sorting, filtering, paging)
   • Use frozen columns sparingly to avoid layout shifts
2. Data Management
   • Always provide a primary key (isPrimaryKey='true')
   • Use ChildMapping for hierarchical data
   • Implement proper error handling for API calls
3. User Experience
   • Provide loading indicators during data fetch
   • Implement search and filter for data discovery
   • Show validation messages for editing errors
   • Support keyboard navigation and accessibility
4. Customization
   • Use themes for consistent styling
   • Create reusable cell templates for common patterns
   • Style conditional rows for user guidance
   • Implement responsive design for mobile devices
5. State Management
   • Enable state persistence for user preferences
   • Save sort, filter, and column settings

Key Props Summary

dataSource

childMapping

allowPaging

allowSorting

allowFiltering

editSettings

enableVirtualization

Module Injection

import { PageService, SortService, FilterService, EditService, ExcelExportService, PdfExportService,
  PrintService, AggregateService, ToolbarService } from '@syncfusion/ej2-angular-treegrid';

@Component({
  providers: [
    PageService, 
    SortService, 
    FilterService, 
    EditService,
    ExcelExportService,
    PdfExportService,
    PrintService,
    AggregateService,
    ToolbarService
  ]
})