Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-grid
syncfusion-angular-grid Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-gridThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
syncfusion-angular-notifications Comprehensive guide for implementing Syncfusion Angular notification components including Message, Skeleton, Toast, and Badge. Use this when displaying informational, success, warning, or error alerts with severity levels, customizing message variants (Text, Outlined, Filled), handling close events, showing content skeletons with shimmer/pulse animations during data loading, or adding status badges with 8 color variants and shape types (circle, pill, notification, dot, overlap). Covers MessageModule, SkeletonModule, ToastModule, CSS-based Badge implementation, accessibility, RTL, and custom styling in Angular applications.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-angular-grid description Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Grids"}
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
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 — 95+ configurable properties organized by category
📄 Methods Reference → references/grid-methods.md — 137+ methods for data manipulation, selection, sorting, filtering, and more
📄 Events Reference → references/grid-events.md — 65+ events for lifecycle management, user interactions, and data changes
📄 Programmatic Control → 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
📄 Module System → references/modules.md — Service injection requirements for feature methods
📄 Selection → references/selection.md — Selection method prerequisites
📄 Backend Integration → references/adaptors.md
Feature Navigation Guide
Getting Started & Setup
Installation and package setup
Basic grid initialization
CSS imports and themes
Minimal working example
Data Management
Local and remote data binding
Data source configuration
API integration
Real-time data updates
Column Configuration
Column properties and types
Column templates
Foreign key columns
Column rendering options
Row Management & Templates
Row properties and events
Row templates
Detail row templates
Row spanning
Selection & Interaction
Row, cell, and column selection
Checkbox selection
Selection events
Multi-select patterns
Data Operations
Filter bar and filter menu
Excel-like filtering
Custom filters
Programmatic filtering
Single and multi-column sorting
Custom sort order
Sort events
Global search functionality
Search across columns
Search algorithms
Pagination setup
Page size configuration
Page change events
Editing & Validation
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
Grouping columns
Lazy-load grouping
Caption templates
Summary rows
Custom aggregate functions
Footer aggregates
Export & Reporting
Export to Excel formats
Export options and customization
Export events
Export to PDF
PDF templates and formatting
Header and footer configuration
Print functionality
Print templates
Print events
Styling & UI Customization
Theme selection
CSS customization
Style specific areas (header, rows, cells)
Custom CSS classes
Toolbar items and configuration
Custom toolbar buttons
Toolbar events and click handlers
Copy/paste functionality
Clipboard events
Clipboard selection management
Advanced Column Features
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
Cell editing and selection
Cell templates
Cell spanning
Cell-level events
Context & Interaction
Context menu items
Custom context menu
Context menu events
Default menu configuration
Advanced Features
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 allowPagingPage module1K – 100K enableVirtualization + heightVirtualScroll, no pagingContinuous enableInfiniteScrolling + heightInfiniteScroll100K+ grouped enableVirtualization + lazyLoadGroupingVirtualScroll, Group
Master-detail grids
Child grid configuration
Nested/hierarchical data
Detail row templates
Lazy-load child data
Save grid state (columns, sorting, filters)
Restore grid state
State persistence options
Responsive/mobile mode
Adaptive layouts
Touch interactions
Keyboard shortcuts and navigation
Global vs local settings
Accessibility configurations
Module System & Architecture
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
Data Connectivity & Adaptors
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
Performance Optimization
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
Accessibility & Compliance
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
Data Validation
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
Command Column & Row Actions
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
Localization & Internationalization
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
Responsive Design & Mobile
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
Programmatic Control
The full programmatic method catalog
Event prop reference
Dynamic column control
setProperties() examples, export hooks, and cross-feature
Event Communication
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
Advanced Tutorials & Real-World Patterns
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
API Reference - Properties
Properties overview
Core data properties
Property organization by category
Configuration reference
API Reference - Methods
Methods overview
Data manipulation methods
Method parameters and signatures
Return types and async handling
API Reference - Events
Events overview
Data events
Event lifecycle and timing
Event arguments and properties
Testing & Quality Assurance
Unit tests
Integration tests
Testing strategies
Test case examples
Quick Start Example 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 (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 },
];
}
}
Common Patterns
Pattern 1: Data Grid with Sorting, Filtering, and Paging Combine sorting, filtering, and paging for a complete data exploration experience:
<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 >
</e-columns >
Pattern 2: Inline Editing with Validation Enable inline editing with form validation:
<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 >
</e-columns >
Pattern 3: Exporting to PDF and Excel Enable both PDF and Excel exports with toolbar:
<ejs-grid [dataSource]="data"
[toolbar]="['PdfExport', 'ExcelExport']"
[allowPdfExport]='true'
[allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)' >
<e-columns >
</e-columns >
Pattern 4: Virtual Scrolling for Large Datasets Optimize performance with virtual scrolling:
<ejs-grid [dataSource]="largeDataset"
[enableVirtualization]="true"
[pageSettings]="{ pageSize: 50 }" >
<e-columns >
</e-columns >
Key Props & Configuration Property Type Purpose Common Values dataSourceArray/DataManager Grid data Employee[], RemoteDataBinding allowSortingboolean Enable sorting true, false allowFilteringboolean Enable filtering true, false allowPagingboolean Enable pagination true, false allowGroupingboolean Enable grouping true, false editSettingsobject Edit configuration { mode: 'Inline' } pageSettingsobject Paging options { pageSize: 12 } enableVirtualizationboolean Virtual scrolling true, false allowExcelExportboolean Excel export true, false allowPdfExportboolean PDF export true, false toolbararray Toolbar items ['Add', 'Edit', 'Delete'] columnsarray Column definitions [{ field, headerText }] heightstring/number Grid height '400px', 'auto'
Common Use Cases Scenario 1: Employee Directory
Implement a searchable, sortable, filterable employee list with details on demand.
Scenario 2: Data Entry Form
Build a grid for adding and editing records with validation.
Scenario 3: Sales Report Dashboard
Create a highly customized grid with grouping, aggregates, and PDF export.
Scenario 4: Real-time Data Monitor
Display streaming data with virtual scrolling and state persistence.
Scenario 5: Multi-level Organization Chart
Show hierarchical org structure with detail rows for each level.
