Syncfusion JavaScript Grid Component Skill

⚠️ 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
• Grid Overview
• Mandatory Rules for Inbuilt API
• Documentation and Navigation Guide
• Quick Start Example
• Common Patterns
• Key Props and Configuration

When to Use This Skill

Use this skill when you need to:

• Build interactive data grids with multiple columns and rows
• Perform CRUD operations (create, read, update, delete)
• Filter, sort, and search large datasets
• Group and aggregate data with summaries
• Export data to Excel or PDF formats
• Implement row selection or multi-select scenarios
• Create responsive data tables with virtual scrolling
• Customize grid styling and appearance
• Handle editing modes (inline, dialog, batch)
• Persist grid state across sessions
• Work with TypeScript and modern module systems

Grid Overview

The Syncfusion EJ2 Grid is a powerful, high-performance data grid component for TypeScript that provides:

• Flexible data binding (local, remote, OData)
• Rich column features (templates, spanning, foreign keys, frozen)
• Advanced editing (inline, dialog, batch, command columns)
• Powerful filtering (menu, bar, excel-like)
• Multi-level grouping with custom aggregates
• 6+ selection modes (row, cell, column, checkbox)
• Export capabilities (Excel, PDF with templates)
• Performance optimization (virtual/infinite scrolling)
• Complete customization (themes, styling, events)

Mandatory Rules for Inbuilt API

CRITICAL: Follow these rules when using Grid's inbuilt API (137+ methods, 65+ events, 95+ properties):

Rule 1: Module Injection Required for Feature Methods

Methods only work if their module is injected. No error thrown if module missing.

📄 Full Properties API Reference: references/api-reference.md 📄 Full Methods API Reference: references/programmatic-api.md 📄 Full Events API Reference: references/events-catalog.md 📄 Backend Integration: references/adaptors.md

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and npm package setup
• TypeScript module imports and configuration
• CSS imports and theme selection
• Basic grid initialization with sample data
• Injecting required modules

Column Features

📄 Read: references/columns.md

• Column types (string, number, date, boolean)
• Column binding and properties
• Data type formatting
• Column width and basic configuration
• Foreign-key columns
• Frozen columns
• Column templates and custom rendering
• Column spanning
• Column width management
• Column chooser (show/hide columns)
• Column headers and customization
• Column menu
• Column reordering
• Column resizing

📄 Read: references/command-column.md

• Command column basics
• Built-in command types (edit, delete, save, cancel)
• Custom command buttons
• Command templates
• Command event handling
• Row-level actions

Data Binding

📄 Read: references/data-binding.md

• Local data binding with arrays
• Remote data binding (URL, OData, WebAPI)
• Query and URL adapters
• Dynamic data source changes
• Immutable mode for optimized rendering performance with large datasets
• Loading indicators (Spinner, Shimmer)
• Data refresh and source switching

Editing

📄 Read: references/editing.md

• All CRUD operations configuration
• Edit settings and modes
• Validation and error handling
• Server-side data persistence
• Edit event handling

Data Validation

📄 Read: references/validation.md

• Built-in validators (required, min, max, pattern)
• Validation rules by column data type (number, string, date)
• Custom validation functions
• Dependent validation (validate based on other column values)
• Dynamic rules (add/remove at runtime)
• Error positioning and display
• CRUD error handling (client + server validation)
• Duplicate detection for unique fields
• Async validation with server checks
• Integration with edit modes, events, and filtering

Filtering Operations

📄 Read: references/filter-setup.md

• Setup filtering module
• Enable filtering feature
• Filter types overview
• Disable filtering for columns
• Quick reference

📄 Read: references/filter-operators.md

• Filter operators (21+ types)
• Initial filters (OR and AND logic)
• Wildcard and LIKE filters
• Case sensitivity
• Diacritics filter

📄 Read: references/filter-types.md

• FilterBar filter with template lifecycle
• Menu filter with custom operators
• Excel/CheckBox filter with multi-select
• Custom filter UI components
• Infinite scrolling for large data
• Comparison of filter types

Sorting

📄 Read: references/sorting.md

• Enable sorting on columns
• Sort multiple columns
• Custom sort comparison
• Sort direction (ascending/descending)
• Sorting with field mapping

Grouping and Aggregates

📄 Read: references/grouping.md

• Enable grouping feature
• Group by single/multiple columns
• Group caption templates
• Multi-level grouping
• Lazy-load grouping for performance
• Collapse/expand groups

📄 Read: references/aggregates.md

• Built-in aggregates (Sum, Avg, Min, Max, Count)
• Custom aggregate functions
• Footer aggregates
• Group-level aggregates
• Reactive aggregate updates

Selection Modes

📄 Read: references/selection.md

• Row selection modes
• Cell selection mode
• Column selection mode
• Checkbox selection
• Multi-select configurations
• Selection events and methods

Row Operations

📄 Read: references/row.md

• Detail row templates (master-detail)
• Row drag and drop
• Row pinning (freeze top/bottom rows)
• Row spanning
• Custom row templates
• Row height management

Freezing & Pinning

📄 Read: references/frozen.md

• Freeze columns
• Freeze rows
• Freeze headers
• Row pinning
• Frozen column behavior
• Performance optimization with frozen columns
• Combining frozen columns with virtual scrolling

Hierarchy & Nested Data

📄 Read: references/hierarchy-grid.md

• Parent-child data structures
• Child grid configuration with queryString
• Expand and collapse behavior
• Nested grid templates
• Detail row templates
• Hierarchical data configuration
• Multi-level hierarchy (3-4 levels)
• Dynamic data binding for child grids
• Programmatic expand/collapse control
• Performance considerations for nested data

Scrolling and Performance

📄 Read: references/scrolling.md

• Virtual scrolling for large datasets
• Infinite scrolling
• Scroll performance optimization
• Scroll events
• Scroll behavior settings

Pagination

📄 Read: references/paging.md

• Page size configuration
• Pagination types (numeric, combo, custom)
• Page size options
• Current page navigation
• Total records handling

Searching

📄 Read: references/searching.md

• Enable search functionality
• Multi-column search
• Search operators
• Clear search method
• Search performance

Toolbar

📄 Read: references/toolbar.md

• Built-in toolbar items (add, edit, delete, save, cancel)
• Custom toolbar templates
• Toolbar item configuration
• Custom buttons and functions
• Toolbar events

Context Menu

📄 Read: references/context-menu.md

• Built-in context menu items
• Custom context menus
• Context menu configuration
• Context menu events
• Right-click menu handling
• Submenu items and grouping
• Selection-based menu display

Event Communication

📄 Read: references/events-catalog.md

• Mandatory rules for event handling
• Event binding patterns (configuration, addEventListener, property assignment)
• 85+ grid events by category (lifecycle, action, row, cell, edit, column, etc.)
• requestType catalog for action events
• Cancellation patterns for actionBegin and before-events
• Event timing and firing sequences
• Events for data changes, user interactions, and operations

Export Features

📄 Read: references/excel-export.md

• Export to Excel basics
• Export options and customization
• Template rendering in export
• Server-side export
• Exporting filtered/grouped data

📄 Read: references/pdf-export.md

• Export to PDF basics
• Export options and customization
• Headers and footers
• Template rendering in export
• Server-side PDF export
• Page orientation and sizing

📄 Read: references/print.md

• Print grid functionality
• Print settings and options
• Print templates
• Print formatting
• Print preview

Configuration Management

📄 Read: references/global-local.md

• Global grid settings
• Local column configuration
• Configuration precedence
• Configuration merging
• Dynamic configuration patterns
• Best practices and templates

📄 Read: references/state-management.md

• Save grid state to storage
• Restore grid state
• Persist state across sessions
• State methods (save, restore, clear)
• Local storage integration

⚠️ Rule: enablePersistence: true must be enable when use state management in grid.

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

Styling and Appearance

📄 Read: references/styling-appearance.md

• Available themes (Fluent, Bootstrap, Tailwind)
• CSS customization
• Custom CSS classes
• Row/cell styling
• Appearance methods
• Dark mode support

Cell

📄 Read: references/cell.md

• Cell selection and manipulation
• Get/set cell values
• Cell formatting and styling
• Cell templates
• Cell events and interactions
• Bulk cell operations

Clipboard

📄 Read: references/clipboard.md

• Copy/paste functionality
• Clipboard operations
• Copy selected cells
• Paste data
• Clipboard formatting

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 & Section 508 compliance
• Keyboard navigation (Tab, Enter, Escape, Arrows)
• WAI-ARIA 1.2 implementation
• Screen reader support (NVDA, JAWS)
• Color contrast ratios (4.5:1, 3:1)
• Focus management and restoration
• ARIA live regions for dynamic updates
• Accessibility testing with axe and screen readers

Responsive Design

📄 Read: references/responsive-adaptive.md

• Responsive grid layouts
• Mobile and tablet design
• Touch interactions and gestures
• Responsive columns (show/hide)
• Stack mode for mobile
• Media queries for different screen sizes
• Orientation change handling

Performance Optimization

📄 Read: references/performance-optimization.md

• Virtual scrolling for large datasets
• Lazy loading groups and details
• Data aggregation and caching
• Memory management
• Performance benchmarking
• Best practices for 10k+ rows
• Remote data optimization

Module System

📄 Read: references/modules.md

• Module injection pattern
• Available modules and feature mapping
• Module dependencies
• Bundle optimization strategies
• Common feature combinations
• Dynamic module loading

Data Adaptors

📄 Read: references/adaptors.md

• URL/HTTP adaptor for RESTful APIs
• ODataV4 adaptor for standard OData services
• WebAPI adaptor for ASP.NET WebAPI
• WebMethod adaptor for legacy ASMX Web Services
• RemoteSave adaptor for separate read/write endpoints
• Custom adaptor for proprietary APIs
• GraphQL adaptor for GraphQL endpoints
• Adaptor selection guide and comparison
• Implementation patterns and error handling

Chart Integration

📄 Read: references/chart-integration.md

• Embed charts in detail templates
• Multi-chart dashboards
• Grid and chart data synchronization
• Interactive drill-down charts
• Real-time updating charts
• KPI visualization

API Reference

📄 Read: references/api-reference.md

• Grid properties reference
• Methods and function signatures
• Events reference
• Settings objects (PageSettings, FilterSettings, etc.)
• Common configuration patterns
• Quick code examples

Programmatic Control (Methods)

📄 Read: references/programmatic-api.md

• Grid instance reference and method access
• Mandatory usage rules for methods
• Data and module methods (refresh, dataBind, destroy)
• Row access and manipulation methods (add, update, delete)
• Row selection methods (selectRow, selectRows, getSelectedRecords)
• Column access and manipulation methods (show, hide, reorder)
• Sorting, grouping, filtering methods
• Editing and batch operation methods
• Export and print methods (Excel, PDF, CSV)
• Toolbar and hierarchy methods
• DOM element access methods
• Utility methods (event listeners, templates, spinners)
• Quick usage examples for common scenarios

Quick Start Example

import { Grid } from '@syncfusion/ej2-grids';

// Sample data
const data = [
  { OrderID: 10248, CustomerName: 'VINET', TotalAmount: 32.38 },
  { OrderID: 10249, CustomerName: 'TOMSP', TotalAmount: 11.61 }
];

// Create grid
const grid = new Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number' },
    { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
    { field: 'TotalAmount', headerText: 'Total Amount', width: 120, type: 'number', format: 'C2' }
  ],
  allowPaging: true,
  pageSettings: { pageSize: 10 },
  allowSorting: true,
  allowFiltering: true,
  selectionSettings: { type: 'Multiple', mode: 'Row' }
});

// Render grid
grid.appendTo('#grid');

Common Patterns

Pattern 1: Read-Only Grid with Search

Use when displaying data without editing. Enable sorting, filtering, and searching. Read: references/getting-started.md → references/sorting.md → references/filter-setup.md → references/searching.md

Pattern 2: Editable Grid with Validation

Use when users need to modify data. Setup editing modes, validation, and toolbar. Read: references/editing.md → references/validation.md → references/toolbar.md

Pattern 3: Grouped Data with Summaries

Use when analyzing aggregated data by groups. Setup grouping and custom aggregates. Read: references/grouping.md → references/aggregates.md

Pattern 4: Large Dataset with Virtual Scrolling

Use for performance with 10k+ rows. Enable virtual scrolling. Read: references/scrolling.md → references/paging.md

Pattern 5: Master-Detail Hierarchy

Use when displaying nested/related data. Setup detail templates. Read: references/row.md

Pattern 6: Data Export

Use when users need to export to Excel or PDF. Read: references/excel-export.md → references/pdf-export.md

Key Props and Configuration