Skip to main content Home Creators syncfusion aspnetmvc-ui-components-skills syncfusion-aspnetmvc-grid
syncfusion-aspnetmvc-grid Implements Syncfusion EJ2 ASP.NET MVC 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/aspnetmvc-ui-components-skills --skill syncfusion-aspnetmvc-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... name syncfusion-aspnetmvc-grid description Implements Syncfusion EJ2 ASP.NET MVC 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 ASP.NET MVC Grid
The Syncfusion EJ2 ASP.NET MVC Grid is a powerful data presentation component that provides comprehensive data management capabilities. It enables developers to create interactive, feature-rich data grids with built-in support for editing, filtering, sorting, grouping, paging, exporting, and much more.
When to Use This Skill
Use this skill when:
Setting up a Grid control in your ASP.NET MVC application
Configuring data binding (local or remote sources)
Implementing user interactions (selection, editing, drag-and-drop)
Creating responsive and adaptive grid layouts for mobile devices
Adding advanced features (grouping, aggregates, hierarchical grids)
Exporting grid data to Excel or PDF
Styling and customizing grid appearance
Managing grid state and persistence
Grid Overview & Key Features
Core Capabilities:
Multi-format data binding (local arrays, remote data via DataManager)
Inline, dialog, batch, and template-based editing
Advanced filtering with Excel-like filters
Single and multi-column sorting
Data grouping with aggregates and summaries
Hierarchical grid support for parent-child relationships
Virtual and infinite scrolling for large datasets
Row and column selection with checkboxes
Export to Excel and PDF formats
Adaptive UI for mobile and desktop responsiveness
State management and persistence
Rich toolbar and context menus
Clipboard operations (copy/paste)
Documentation Navigation
Getting Started & Basics
Installation and setup prerequisites
NuGet package installation
Basic grid initialization with HTML helper
Adding stylesheets and scripts
Binding data to the grid
Adaptive dialogs for small screens
Vertical row rendering mode
Responsive behavior
Mobile-optimized UI
Data Management & Binding
Local data binding with IEnumerable
Remote data binding with DataManager
Async data loading
DataSource property configuration
Pagination setup and configuration
Page size configuration
Server-side paging
Pager customization
Parent-child grid relationships
Child grid initialization
Hierarchy row expansion
Related data display
Global and local property settings
Property precedence
Configuration scopes
Save and restore grid state
State persistence
Column state management
Custom state handling
Display & Layout
Column definition and configuration
Column templates and rendering
Column headers and customization
Column reordering and resizing
Column spanning
Foreign key columns
Frozen columns
Row templates and customization
Detail templates for expanded rows
Row spanning
Row drag and drop
Row pinning
Row styling and formatting
Cell display and formatting
HTML content in cells
Text wrapping (AllowTextWrap)
Cell styling and customization
Cell events (QueryCellInfo)
DisableHtmlEncode property
Freeze columns at grid edges
Freeze rows
Frozen column behavior
Frozen row handling
Virtual scrolling for performance
Infinite scrolling with lazy loading
Horizontal and vertical scrolling
Scroll indicators
User Interactions
Row selection modes
Column selection
Cell selection
Checkbox selection
Multi-select behavior
Selection events
Inline editing mode
Dialog editing
Batch editing
Template editing
Edit types and configurations
Validation during editing
Data persistence in server
Command column editing
Keyboard shortcuts (Ctrl+C, Ctrl+Shift+H)
Copy selected rows and cells
AutoFill feature with drag-and-drop
Paste functionality
External button-triggered copy
Right-click context menu
Custom menu items
Menu item configuration
Context menu events
Search, Sort & Filter
Quick search functionality
Search bar configuration
Search across columns
Global search
Single-column sorting
Multi-column sorting
Custom sort comparers
Sort indicators
Programmatic sorting
Filter bar
Filter menu
Excel-like filter UI
Filter types and operators
Filtering configurations
Custom filters
Data Features
Footer aggregates (Sum, Average, Count, Min, Max)
Group and caption aggregates
Custom aggregate functions
Reactive aggregate calculations
Aggregate display formatting
Group by single or multiple columns
Caption templates
Group summary rows
Lazy load grouping
Group expand/collapse
Grouping configurations
Export & Output
Export grid data to Excel
Excel export options
Export with templates
Server-side Excel exporting
Custom export formatting
Export grid to PDF format
PDF export options
Headers and footers in PDF
Export with custom templates
Server-side PDF generation
Print grid data
Print templates
Print preview
Print options configuration
Page setup
UI & Customization
Toolbar configuration
Built-in toolbar items
Custom toolbar items
Toolbar templates
Item customization and events
Theme selection and application
CSS customization
Custom CSS classes
Styling classes and properties
Appearance configuration
Quick Start Example
@{
var data = new List<OrderData>
{
new OrderData { OrderID = 10248 , CustomerName = "Acme Corp" , TotalAmount = 32.38 m },
new OrderData { OrderID = 10249 , CustomerName = "Wonderland" , TotalAmount = 11.61 m }
};
}
@Html.EJS().Grid("Grid" ).DataSource(data)
.Columns(col =>
{
col.Field("OrderID" ).HeaderText("Order ID" ).IsPrimaryKey(true ).Width("120" ).Add();
col.Field("CustomerName" ).HeaderText("Customer Name" ).Width("150" ).Add();
col.Field("TotalAmount" ).HeaderText("Total Amount" ).Width("150" ).Format("C2" ).Add();
})
.AllowPaging()
.PageSettings(page => page.PageSize(12 ))
.Render()
public class OrderData
{
public int OrderID { get ; set ; }
public string CustomerName { get ; set ; }
public decimal TotalAmount { get ; set ; }
}
Common Patterns
Pattern 1: Remote Data Binding with Paging and Sorting @Html.EJS().Grid("Grid" )
.DataSource(ds => ds.Url("url" ).Adaptor("UrlAdaptor" ))
.Columns(col =>
{
col.Field("OrderID" ).HeaderText("Order ID" ).Width("100" ).Add();
col.Field("CustomerName" ).HeaderText("Customer" ).Width("150" ).Add();
})
.AllowPaging()
.AllowSorting()
.PageSettings(page => page.PageSize(15 ))
.Render()
Pattern 2: Inline Editing with Validation @Html.EJS().Grid("Grid" ).DataSource(data)
.Columns(col =>
{
col.Field("OrderID" ).HeaderText("Order ID" ).IsPrimaryKey(true ).Width("100" ).Add();
col.Field("CustomerName" ).HeaderText("Customer" ).ValidationRules(new { required = true , minLength = 5 }).Width("150" ).Add();
col.Field("TotalAmount" ).HeaderText("Amount" ).Type("number" ).ValidationRules(new { required = true , min = 0 }).Width("150" ).Add();
})
.EditSettings(edit => edit.AllowEditing().AllowDeleting())
.ActionFailure("onActionFailure" )
.Render()
Pattern 3: Grouping with Footer Aggregates @Html.EJS().Grid("Grid" ).DataSource(data)
.Columns(col =>
{
col.Field("CustomerName" ).HeaderText("Customer" ).Width("150" ).Add();
col.Field("TotalAmount" ).HeaderText("Amount" ).Format("C2" ).Width("150" ).Add();
})
.AllowGrouping()
.GroupSettings(group => { group .Columns(new string [] { "CustomerName" }); })
.Aggregates(gridAggregation => { gridAggregation.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() {new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "TotalAmount" , Type = "Sum" , FooterTemplate = "Sum: ${Sum}" }}).Add();})
.Render()
Pattern 4: Excel-like Filtering @Html.EJS().Grid("Grid" ).DataSource(data)
.AllowFiltering()
.FilterSettings(filter => filter.Type(FilterType.Excel))
.Columns(col =>
{
col.Field("OrderID" ).HeaderText("Order ID" ).Width("100" ).Add();
col.Field("CustomerName" ).HeaderText("Customer" ).Width("150" ).Add();
})
.Render()
Pattern 5: Export to Excel and PDF @Html.EJS().Grid("Grid" ).DataSource(data)
.Columns(col =>
{
col.Field("OrderID" ).HeaderText("Order ID" ).Width("100" ).Add();
col.Field("CustomerName" ).HeaderText("Customer" ).Width("150" ).Add();
})
.Toolbar(new List<string > { "ExcelExport" , "PdfExport" })
.AllowExcelExport()
.AllowPdfExport()
.ToolbarClick("toolbarClick" )
.Render()
function toolbarClick (args ) {
var grid = document .getElementById ('Grid' ).ej2_instances [0 ];
if (args.item .id === 'Grid_excelexport' ) {
grid.excelExport ();
} else if (args.item .id === 'Grid_pdfexport' ) {
grid.pdfExport ();
}
}
More from this repository syncfusion-aspnetmvc-pivot-table Use this skill when users ask how to add or configure Syncfusion PivotView/pivot tables in ASP.NET MVC apps. Trigger for MVC integration, data binding, OLAP/cube setup, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exporting, or pivot charts. MVC-only, not Core/Blazor/JS.
syncfusion-aspnetmvc-ai-assistview Implement the Syncfusion ASP.NET MVC AI AssistView component — a conversational AI chat interface with prompt/response rendering, prompt suggestions, custom views, toolbar customization, file attachments, speech-to-text, AI backend integrations (Azure OpenAI, Gemini, Ollama, LiteLLM), generative UI with interactive tools, Chain of Thoughts reasoning visualization and text-to-speech audio playback. Use this skill when building AI chat UIs, integrating LLM backends, configuring assistant toolbars, customizing templates, rendering dynamic UI components, or handling voice input/output in ASP.NET MVC applications.
syncfusion-aspnetmvc-barcodes Use this skill whenever the user asks to generate, customize, render, or export barcodes, QR codes, or DataMatrix codes using Syncfusion ASP.NET MVC Barcode components. Trigger this skill for requests involving BarcodeGenerator,QRCodeGenerator, or DataMatrixGenerator, including barcode types such as Code39,Code128, and Codabar, visual customization (color, size, display text), QR logo embedding, and exporting barcodes as JPG, PNG, or Base64 in ASP.NET MVC projects.
Related occupations SOC
Based on SOC occupation classification
