Skip to main content Home Creators syncfusion aspnetmvc-ui-components-skills syncfusion-aspnetmvc-treegrid
syncfusion-aspnetmvc-treegrid Implements Syncfusion EJ2 ASP.NET MVC TreeGrid component for hierarchical data with editable parent–child tables. Use for nested datasets with sorting, filtering, paging, or Excel/PDF export. Covers data binding, templates, virtual scrolling, editing, selection, aggregates, and state persistence to deliver high‑performance tabular operations.
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-treegridThe 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-treegrid description Implements Syncfusion EJ2 ASP.NET MVC TreeGrid component for hierarchical data with editable parent–child tables. Use for nested datasets with sorting, filtering, paging, or Excel/PDF export. Covers data binding, templates, virtual scrolling, editing, selection, aggregates, and state persistence to deliver high‑performance tabular operations. license SEE LICENSE IN license metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Grid Components"}
Syncfusion EJ2 ASP.NET Core Tree Grid
Table of Contents
The Tree Grid component displays hierarchical data in a tabular format with support for data binding, editing, filtering, sorting, grouping, exporting, and dynamic row operations. This guide covers all essential features from basic setup through advanced scenarios.
⚠️ Security & Trust Boundary
The TreeGrid 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.
When to Use This Skill Use this skill when you need to:
Display hierarchical data structures (parent-child relationships)
Create interactive data grids with editing capabilities
Implement filtering, sorting, and searching
Export data to Excel or PDF
Handle large datasets with virtual scrolling
Manage row selection and multi-select operations
Customize cell appearance and row templates
Create summary/aggregate views of hierarchical data
Implement drag-and-drop or other user interactions
Component Overview
Hierarchical Data : Display parent-child relationships with expand/collapseData Binding : Local arrays or remote data sourcesCRUD Operations : Insert, update, delete rows with validationFiltering & Search : Multiple filter modes, advanced expressionsSorting & Grouping : Multi-column sorting, aggregatesColumn Customization : Templates, formatting, resizing, reorderingExport : Excel (XLSX) and PDF with stylingPerformance : Virtual scrolling, infinite scroll, immutable modeSelection : Row, cell, checkbox selection with multiple modesResponsive : Mobile-friendly layout, adaptive columns
Feature Overview Matrix Feature Complexity Common Use Performance Impact Data Binding & Hierarchy Low Essential Low Columns & Formatting Low-Medium Essential Low Selection Low Common Low Filtering & Sorting Medium Common Medium (client-side) Editing Medium Common Medium Aggregates Medium Common Low Virtual Scrolling High Large datasets High (positive) Exporting Medium Occasional Medium Advanced Row Features Medium Occasional Medium Performance Optimization High Large datasets High (positive)
Navigation Guide Choose the reference that matches your current need:
📄 Getting Started
Prerequisites & system requirements
NuGet package installation
Tag helper setup
Initial configuration
First working example
Start here for: New developers setting up Tree Grid
📄 Data Binding & Hierarchy
Local vs remote data sources
Parent-child mapping
Hierarchical data structures
Self-referential data
Expand state management
Start here for: Connecting your data
📄 Columns & Display
Field mapping and types
Column formatting (numbers, dates)
Column templates
Sizing and resizing
Stacked headers
Start here for: Customizing Grid appearance
📄 Column Reordering
Enable column reordering
Drag-drop column rearrangement
Reordering events
Column order persistence
Start here for: User-driven column rearrangement
📄 Cell
Cell styling with QueryCellInfo
HTML content in cells
Cell templates
Conditional formatting
Text wrapping and overflow
Start here for: Cell-level customization
📄 Row
Row templates & custom layouts
Dynamic row height
Row spanning & drag-drop
Detail templates
Indent customization
Start here for: Row customization
📄 Selection & Interaction
Row, cell, checkbox selection
Multiple selection modes
Selection events
Programmatic selection
Selection patterns & use cases
Start here for: User selection handling
📄 Editing & CRUD
Cell/row/dialog editing modes
Edit templates & types
Data validation
Server-side persistence
Toolbar edit actions
Start here for: Adding edit capabilities
📄 Sorting
Single & multi-column sorting
Sort direction configuration
User and programmatic sorting
Sort events
Start here for: Data sorting
📄 Filtering
Filter bar configuration
Filter menu with operators
Excel-like filtering
Advanced filter expressions
Filter events
Start here for: Data filtering
📄 Searching
Enable search functionality
Search toolbar setup
Multiple search methods
Case-sensitive options
Real-time search
Start here for: Text search
📄 Aggregates & Summaries
Built-in aggregate functions (Sum, Avg, Min, Max, Count)
Footer aggregates
Custom aggregates
Hierarchical summaries
Format aggregates
Start here for: Creating summary views
📄 Toolbar Configuration
Enable toolbar with built-in items
Export, Print, Edit, Delete buttons
Custom toolbar buttons
Toolbar click events
Programmatic toolbar actions
Start here for: Adding toolbar UI
📄 Command Column
Command button column configuration
Built-in commands (Edit, Delete, Save, Cancel)
Custom command buttons
Command click events
Command column templates
Start here for: Adding inline action buttons
📄 Paging
Enable client-side paging
Page size configuration
Pager customization
AllPages vs RootPages modes
Server-side paging
Start here for: Dividing large datasets
📄 Scrolling & Virtualization
Horizontal and vertical scrolling
Performance optimization
Scroll events
Start here for: Managing grid scroll behavior
📄 Virtualization Scroll
Virtual scrolling for large datasets
Row virtualization
Column virtualization
Performance optimization for 10,000+ rows
Start here for: Handling massive datasets efficiently
📄 Infinite Scroll
Enable infinite scroll loading
Dynamic data loading
Load more events
Server-side infinite scroll
Start here for: Continuous scrolling without paging
📄 Frozen Rows and Columns
Freeze columns
Freeze rows
Fixed header rows
Column freeze customization
Start here for: Creating sticky columns/rows
📄 Excel & PDF Export
Excel export configuration with styling
PDF export configuration
Cell styling & formatting
Headers and footers
Customization options
Export events
Start here for: Exporting to Excel and PDF files
📄 State Persistence
Enable automatic state saving
Persist sort, filter, selection
Server-side storage
Custom state handling
Restore on page reload
Start here for: Remembering user preferences
📄 Globalization & Localization
Locale configuration
70+ built-in languages
Custom translations
RTL support (Arabic, Hebrew)
Number & date formatting
Start here for: Multi-language support
📄 Adaptive View (Mobile & Responsive)
Responsive column hiding
Mobile touch optimization
Touch-friendly sizing
Device detection
Orientation change handling
Start here for: Mobile-friendly grids
📄 Context Menu
Right-click context menu
Built-in menu items
Custom menu items
Context menu events
Role-based menus
Start here for: Quick-access actions
📄 Loading Animation & States
Show/hide loading spinner
Custom loader templates
Skeleton loading
Empty state handling
Error states & retry logic
Start here for: User feedback during async operations
📄 Accessibility
ARIA attributes
Keyboard navigation
Screen reader support
Accessibility compliance (WCAG)
Role and semantic HTML
Start here for: Creating accessible grids
📄 Clipboard Operations
Copy cell/row data
Copy with headers
Paste operations
Clipboard events
Format handling
Start here for: Enabling copy-paste functionality
📄 Row Drag and Drop
Enable row dragging
Drop zones
Drag-drop events
Custom drop behavior
Reordering rows
Start here for: User-driven row rearrangement
📄 Print Functionality
Print grid data
Print styling & appearance
Print headers and footers
Page breaks
Print events
Start here for: Printing grid content
📄 Immutable Mode
Enable immutable mode for performance
Data comparison and update detection
Batch updates
Large dataset optimization
Start here for: Optimizing updates with large datasets
📄 Advanced Features & Styling
Built-in themes (Material, Fluent, Bootstrap)
Custom CSS customization
CSS variables
Responsive styling
Print styling
Event handlers
RTL support
Start here for: Grid customization & branding
📄 Performance Optimization
Virtual scrolling setup
Immutable mode
Infinite scroll
Edit templates
Validation
Command columns
Batch operations
Server-side persistence
Large dataset handling best practices
Start here for: Maximizing performance
📄 API Properties
Complete property reference
Configuration options
Bindable properties
Default values
Type definitions
Start here for: Looking up component properties
📄 API Methods
Public method reference
Programmatic API
Method signatures
Return types
Usage examples
Start here for: Calling TreeGrid methods
📄 Events Reference
Complete event listing
Event signatures
Event arguments
Event handling patterns
Custom event workflows
Start here for: Subscribing to TreeGrid events
Quick Start Example Install-Package Syncfusion.EJ2.AspNet.Core
Step 2: Add Tag Helper (_ViewImports.cshtml)
@addTagHelper *, Syncfusion.EJ2
Step 3: Add Resources (_Layout.cshtml)
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/23.1.36/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" > </script >
<ejs-treegrid id ="TreeGrid"
dataSource ="ViewBag.DataSource"
childMapping ="Children"
treeColumnIndex ="0" >
<e-treegrid-columns >
<e-treegrid-column field ="TaskID" headerText ="ID" width ="100" type ="number" > </e-treegrid-column >
<e-treegrid-column field ="TaskName" headerText ="Task Name" width ="200" > </e-treegrid-column >
<e-treegrid-column field ="StartDate" headerText ="Start Date" type ="date" format ="yMd" > </e-treegrid-column >
<e-treegrid-column field ="Duration" headerText ="Duration" width ="100" type ="number" > </e-treegrid-column >
</e-treegrid-columns >
</ejs-treegrid >
Step 5: Prepare Data (Controller)
public IActionResult Index ()new List<TaskData>()
{
new TaskData() { TaskID = 1 , TaskName = "Project" , StartDate = new DateTime(2024 , 01 , 01 ), Duration = 100 ,
Children = new List<TaskData>()
{
new TaskData() { TaskID = 2 , TaskName = "Planning" , Duration = 20 },
new TaskData() { TaskID = 3 , TaskName = "Development" , Duration = 50 }
}
}
};
ViewBag.DataSource = data;
return View();
}
Common Patterns
Pattern 1: Formatted Currency Display <e-treegrid-column field ="Budget" headerText ="Budget" type ="number" format ="C2" width ="120" > </e-treegrid-column >
Pattern 2: Custom Row Selection <e-treegrid-selectionsettings type ="Multiple" mode ="Row" > </e-treegrid-selectionsettings >
Pattern 3: Cell Styling function queryCellInfo (args ) {
if (args.data .Status === 'Complete' ) {
args.cell .classList .add ('complete-status' );
}
}
Pattern 4: Quick Filters <ejs-treegrid
allow-filtering ="true"
filter-settings ="new { type = 'FilterBar' }" >
</ejs-treegrid >
Key Properties Quick Reference Property Type Purpose Example dataSourcearray/DataManager Data to display ViewBag.DataSourcechildMappingstring Child hierarchy field "Children"treeColumnIndexnumber Column showing hierarchy 0allowSelectionboolean Enable selection trueallowFilteringboolean Enable filtering trueallowSortingboolean Enable sorting trueallowExcelExportboolean Excel export trueallowPdfExportboolean PDF export trueenableVirtualizationboolean Virtual scrolling true (large data)editSettingsobject CRUD configuration Editing guide aggregateRowsarray Summary rows Aggregates guide columnsarray Grid columns Columns guide
Next Steps
Master Reference : All 12 comprehensive guides are organized by feature. Choose the topic matching your current task.
More from this repository
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.
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.
Related occupations SOC
Based on SOC occupation classification
