Syncfusion Aspnetcore Grid

Syncfusion ASP.NET Core Grid

The Syncfusion ASP.NET Core Grid is a comprehensive, feature-rich component for displaying and manipulating tabular data. It provides extensive functionality for data binding, paging, sorting, filtering, grouping, editing, exporting, scrolling modes, row/column customization, and advanced state management to handle datasets of any size and complexity efficiently.

⚠️ 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
• Component Overview
• Feature/Skill Navigation Guide
• Quick Start Example

When to Use This Skill

Use the Syncfusion ASP.NET Core Grid when you need to:

• Display tabular data with rows and columns in ASP.NET Core applications
• Handle large datasets efficiently with paging, virtual scrolling, or infinite scrolling
• Enable sorting, filtering, and searching for single or multiple columns
• Edit data inline with multiple edit modes (Inline, Batch, Dialog)
• Export data to Excel or PDF formats with customization
• Group and aggregate data with summaries and calculations
• Customize rows and cells with templates and styling
• Manage complex column configurations (frozen columns, spanning, reordering, resizing)
• Optimize performance when rendering thousands of records
• Persist grid state for user preferences and configuration
• Provide responsive data views for different screen sizes

Component Overview

The Grid component provides:

• Data Binding: Support for local collections, remote data sources, and DataManager integration
• Paging: Server-side or client-side pagination with customizable page size and navigation
• Sorting: Single and multi-column sorting
• Filtering: Multiple filter modes (FilterBar, FilterMenu, Excel-like filter)
• Searching: Global search across columns
• Grouping: Group data by columns with aggregates
• Selection: Row, cell, and column selection with checkbox support
• Editing: Inline, Batch, and Dialog modes with validation and templates
• Aggregates: Sum, Average, Count, Min, Max with footer, group, and caption display
• Exporting: Excel and PDF export with templates and customization
• Scrolling: Standard, Virtual, and Infinite scrolling modes
• Row Customization: Templates, detail views, drag-drop, pinning, spanning
• Column Customization: Templates, resizing, reordering, freezing, spanning
• Performance: Optimized rendering for large datasets
• Responsive Design: Adaptive layouts for different screen sizes

Mandatory Rules for Server-Side Grid Configuration

CRITICAL: Follow these rules when configuring ASP.NET Core Grid for optimal performance and correctness:

Rule 1: DataManager Adaptor Configuration

Adaptors determine how the Grid communicates with your server backend. Each request type (read, create, update, delete) has specific URL mapping requirements.

📄 Full Adaptor Reference: references/adaptors.md

Rule 2: EnablePersistence for State Management

To persist grid state (sorting, filtering, grouping, paging, column order), enable persistence:

<ejs-grid id="Grid" allowPaging="true" enablePersistence="true">
    <!-- Grid configuration -->
</ejs-grid>

⚠️ Rule: enablePersistence="true" is required when using state management in grid.

Rule 3: Primary Key Configuration for Editing

The isPrimaryKey="true" attribute is required on the key column — editing silently fails without it.

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>

Feature/Skill Navigation Guide

Getting Started & Setup

📄 Read: references/getting-started.md

• NuGet package installation
• Tag helper registration
• CSS and script setup
• Basic grid initialization
• Data binding fundamentals

Data Binding

📄 Read: references/data-binding.md

• Local data binding (IEnumerable, List, DataTable)
• Remote data with DataManager (OData, WebAPI)
• Loading indicators
• Dynamic data refresh

Column Configuration

📄 Read: references/columns.md

• Column definition and properties
• Column types (string, number, date, boolean, checkbox)
• Column width and formatting
• Column templates and custom rendering
• Column features (spanning, reordering, resizing)
• Foreign key columns
• Stacked headers

Data Aggregation

📄 Read: references/aggregates.md

• Footer aggregates (Sum, Avg, Count, Min, Max)
• Group footer aggregates
• Group caption aggregates
• Custom aggregate functions
• Reactive aggregate updates

Navigation & Pagination

📄 Read: references/paging.md

• Enable and configure paging
• Page size configuration
• Navigation and page change
• External paging

Sorting Data

📄 Read: references/sorting.md

• Enable sorting (single and multi-column)
• Initial sort configuration
• Custom sort comparers
• Sort events

Filtering

Start here: 📄 Read references/filter-setup.md — Enable filtering, choose filter type (FilterBar, Menu, Excel, CheckBox)

Choose your type:

• 📄 Read references/filter-types.md — All filter types: FilterBar (inline text), Menu (operators), Excel (checkboxes)
• 📄 Read references/filter-operators.md — All filter operators, syntax, wildcards, AND/OR logic

Searching

📄 Read: references/searching.md

• Grid search functionality
• Global search across columns
• Search configuration

Grouping Data

📄 Read: references/grouping.md

• Enable grouping by columns
• Group by multiple columns
• Caption templates
• Group footer aggregates
• Lazy-load grouping

Selection

📄 Read: references/selection.md

• Row, cell, and column selection modes
• Checkbox selection
• Multiple selection handling
• Selection events

Editing

📄 Read: references/editing.md

• Enable editing (allowEditing, allowAdding, allowDeleting)
• Edit modes: Inline, Batch, Dialog
• Edit triggers (double-click, toolbar)
• Custom edit templates
• Validation rules
• Server-side data persistence

Row Features

📄 Read: references/row.md

• Row templates
• Detail templates (expand/collapse)
• Row drag and drop
• Row pinning
• Row spanning

Toolbar

📄 Read: references/tool-bar.md

• Built-in toolbar items
• Custom toolbar buttons
• Toolbar events

Exporting to Excel

📄 Read: references/excel-export.md

• Excel export setup
• Export options and customization
• Export with templates
• Server-side export

Exporting to PDF

📄 Read: references/pdf-export.md

• PDF export setup
• Headers and footers
• Export options and customization
• Export with templates
• Server-side export

Printing

📄 Read: references/print.md

• Print grid
• Print templates
• Print customization

Styling & Appearance

📄 Read: references/style-and-appearance.md

• CSS customization
• Themes and dark mode
• Inline styling and classes
• Custom color schemes

Freezing & Pinning

📄 Read: references/frozen.md

• Freeze columns
• Freeze rows
• Row pinning
• Frozen column behavior

Scrolling Modes

📄 Read: references/scrolling.md

• Standard scrolling
• Virtual scrolling (performance optimization)
• Infinite scrolling
• Scrollbar and height configuration

Hierarchy & Nested Data

📄 Read: references/hierarchy-grid.md

• Parent-child data structures
• Child grid configuration
• Expand and collapse behavior
• Detail row templates
• Lazy loading child data

Context Menu

📄 Read: references/context-menu.md

• Built-in context menu items
• Custom context menus
• Context menu events

Cell Features

📄 Read: references/cell.md

• Cell templates
• Cell customization via events
• Custom cell attributes
• Cell tooltips

Clipboard Operations

📄 Read: references/clipboard.md

• Copy and paste functionality
• Copy with headers
• Custom separators

Configuration Management

📄 Read: references/global-local.md

• Global grid settings
• Local column configuration

State Management

📄 Read: references/state-management.md

• Persist grid state
• Save and restore state
• Local storage

⚠️ Rule: enablePersistence="true" must be enabled when using state management in grid.

Data Validation

📄 Read: references/validation.md

• Built-in validation rules
• Custom validation logic
• Dynamic validation
• Server-side validation
• Error handling

Command Column & Row Actions

📄 Read: references/command-column.md

• 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

📄 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

Responsive Design & Mobile

📄 Read: references/adaptive.md

• Enable adaptive UI for mobile
• Full-screen dialogs for filtering/editing
• Mobile-optimized layouts

📄 Read: references/responsive-design.md

• Responsive grid layouts
• Column visibility on mobile
• Touch-friendly interactions
• Mobile breakpoints

API Reference & Properties

📄 Read: references/properties-configuration.md

• All configurable properties organized by category
• Quick reference table for quick lookup
• When to use each property
• Configuration requirements

Programmatic Control (Methods)

📄 Read: references/programmatic-api.md

• Grid methods by category (data, row, column, sort, filter, group, page, edit, export)
• Method signatures and parameters
• Return values and usage patterns
• Server-side method invocation

Event Communication (Events)

📄 Read: references/events-catalog.md

• All Grid events with timing and use cases
• ActionBegin event for canceling or mutating actions
• ActionComplete event for reactive operations
• ActionFailure event for error handling
• Using args.requestType to identify the action

Data Connectivity & Adaptors

📄 Read: references/adaptors.md

• 5+ adaptor types for backend integration
• UrlAdaptor, ODataV4Adaptor, WebApiAdaptor
• Custom adaptors and RemoteSaveAdaptor
• Backend configuration examples (C#, Node.js)
• Request/response format specifications
• Error handling and adaptor comparison

Performance Optimization

📄 Read: references/performance.md

• 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

Accessibility & Compliance

📄 Read: references/accessibility.md

• 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
• Semantic HTML practices

Quick Start Example

@* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2

@* ~/Pages/Index.cshtml *@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowSorting="true" allowFiltering="true">
    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

// Controller / PageModel
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords();
    return View();
}