Syncfusion Aspnetmvc Treegrid

Syncfusion EJ2 ASP.NET Core Tree Grid

Table of Contents

• Getting Started
• Data Binding & Hierarchy
• Columns & Display
• Column Reordering
• Cell
• Row
• Selection & Interaction
• Editing & CRUD
• Sorting
• Filtering
• Searching
• Aggregates & Summaries
• Toolbar Configuration
• Command Column
• Paging
• Scrolling & Virtualization
• Virtualization Scroll
• Infinite Scroll
• Frozen Rows and Columns
• Excel & PDF Export
• State Persistence
• Globalization & Localization
• Adaptive View (Mobile & Responsive)
• Context Menu
• Loading Animation & States
• Accessibility
• Clipboard Operations
• Row Drag and Drop
• Print Functionality
• Immutable Mode
• Performance Optimization
• API Properties
• API Methods
• Events Reference

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

Core Capabilities:

• Hierarchical Data: Display parent-child relationships with expand/collapse
• Data Binding: Local arrays or remote data sources
• CRUD Operations: Insert, update, delete rows with validation
• Filtering & Search: Multiple filter modes, advanced expressions
• Sorting & Grouping: Multi-column sorting, aggregates
• Column Customization: Templates, formatting, resizing, reordering
• Export: Excel (XLSX) and PDF with styling
• Performance: Virtual scrolling, infinite scroll, immutable mode
• Selection: Row, cell, checkbox selection with multiple modes
• Responsive: Mobile-friendly layout, adaptive columns

Feature Overview Matrix

Navigation Guide

Choose the reference that matches your current need:

📄 Getting Started

📖 Read: references/getting-started.md

• 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

📖 Read: references/data-binding.md

• 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

📖 Read: references/columns.md

• Field mapping and types
• Column formatting (numbers, dates)
• Column templates
• Sizing and resizing
• Stacked headers
• Start here for: Customizing Grid appearance

📄 Column Reordering

📖 Read: references/column-reordering.md

• Enable column reordering
• Drag-drop column rearrangement
• Reordering events
• Column order persistence
• Start here for: User-driven column rearrangement

📄 Cell

📖 Read: references/cell.md

• Cell styling with QueryCellInfo
• HTML content in cells
• Cell templates
• Conditional formatting
• Text wrapping and overflow
• Start here for: Cell-level customization

📄 Row

📖 Read: references/row.md

• Row templates & custom layouts
• Dynamic row height
• Row spanning & drag-drop
• Detail templates
• Indent customization
• Start here for: Row customization

📄 Selection & Interaction

📖 Read: references/selection.md

• Row, cell, checkbox selection
• Multiple selection modes
• Selection events
• Programmatic selection
• Selection patterns & use cases
• Start here for: User selection handling

📄 Editing & CRUD

📖 Read: references/editing.md

• Cell/row/dialog editing modes
• Edit templates & types
• Data validation
• Server-side persistence
• Toolbar edit actions
• Start here for: Adding edit capabilities

📄 Sorting

📖 Read: references/sorting.md

• Single & multi-column sorting
• Sort direction configuration
• User and programmatic sorting
• Sort events
• Start here for: Data sorting

📄 Filtering

📖 Read: references/filtering.md

• Filter bar configuration
• Filter menu with operators
• Excel-like filtering
• Advanced filter expressions
• Filter events
• Start here for: Data filtering

📄 Searching

📖 Read: references/searching.md

• Enable search functionality
• Search toolbar setup
• Multiple search methods
• Case-sensitive options
• Real-time search
• Start here for: Text search

📄 Aggregates & Summaries

📖 Read: references/aggregates.md

• 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

📖 Read: references/toolbar.md

• 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

📖 Read: references/command-column.md

• 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

📖 Read: references/paging.md

• Enable client-side paging
• Page size configuration
• Pager customization
• AllPages vs RootPages modes
• Server-side paging
• Start here for: Dividing large datasets

📄 Scrolling & Virtualization

📖 Read: references/scrolling.md

• Horizontal and vertical scrolling
• Performance optimization
• Scroll events
• Start here for: Managing grid scroll behavior

📄 Virtualization Scroll

📖 Read: references/virtualization-Scroll.md

• Virtual scrolling for large datasets
• Row virtualization
• Column virtualization
• Performance optimization for 10,000+ rows
• Start here for: Handling massive datasets efficiently

📄 Infinite Scroll

📖 Read: references/infinite-scroll.md

• 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

📖 Read: references/frozen-rows-and-columns.md

• Freeze columns
• Freeze rows
• Fixed header rows
• Column freeze customization
• Start here for: Creating sticky columns/rows

📄 Excel & PDF Export

📖 Read: references/exports.md

• 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

📖 Read: references/state-persistence.md

• 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

📖 Read: references/globalization.md

• 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)

📖 Read: references/adaptive-view.md

• Responsive column hiding
• Mobile touch optimization
• Touch-friendly sizing
• Device detection
• Orientation change handling
• Start here for: Mobile-friendly grids

📄 Context Menu

📖 Read: references/context-menu.md

• 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

📖 Read: references/loading-animation.md

• 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

📖 Read: references/accessibility.md

• ARIA attributes
• Keyboard navigation
• Screen reader support
• Accessibility compliance (WCAG)
• Role and semantic HTML
• Start here for: Creating accessible grids

📄 Clipboard Operations

📖 Read: references/clipboard.md

• Copy cell/row data
• Copy with headers
• Paste operations
• Clipboard events
• Format handling
• Start here for: Enabling copy-paste functionality

📄 Row Drag and Drop

📖 Read: references/row-drag-and-drop.md

• Enable row dragging
• Drop zones
• Drag-drop events
• Custom drop behavior
• Reordering rows
• Start here for: User-driven row rearrangement

📄 Print Functionality

📖 Read: references/print.md

• Print grid data
• Print styling & appearance
• Print headers and footers
• Page breaks
• Print events
• Start here for: Printing grid content

📄 Immutable Mode

📖 Read: references/immutable-mode.md

• 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

📖 Read: references/advanced-features.md

• 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

📖 Read: references/performance-features.md

• 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

📖 Read: references/properties.md

• Complete property reference
• Configuration options
• Bindable properties
• Default values
• Type definitions
• Start here for: Looking up component properties

📄 API Methods

📖 Read: references/methods.md

• Public method reference
• Programmatic API
• Method signatures
• Return types
• Usage examples
• Start here for: Calling TreeGrid methods

📄 Events Reference

📖 Read: references/events.md

• Complete event listing
• Event signatures
• Event arguments
• Event handling patterns
• Custom event workflows
• Start here for: Subscribing to TreeGrid events

Quick Start Example

Step 1: Install Package

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>

Step 4: Create Tree Grid

<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()
{
    List<TaskData> data = 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

For a complete property listing, see API Properties.

Next Steps

1. Start Simple: Begin with Getting Started for setup
2. Add Data: Follow Data Binding to connect your data
3. Customize Display: Use Columns Guide for formatting
4. Enable Features: Add filtering, sorting, editing as needed
5. Optimize: Use Performance Guide for large datasets
6. Export: Configure Exports for reporting
7. API Reference: Check Properties, Methods, and Events for complete API documentation

Master Reference: All 12 comprehensive guides are organized by feature. Choose the topic matching your current task.