📊 Getting Started — ASP.NET MVC Pivot Table Component (Syncfusion EJ2)

🚀 ASP.NET MVC quick-start template demonstrating Syncfusion EJ2 PivotView (Pivot Table) with Field List, Grouping Bar, Calculated Fields, Data Formatting, and Multi-level Sorting — includes comprehensive sample data, step-by-step setup, and production-ready configuration.

📺 Official Demo: https://ej2.syncfusion.com/aspnetmvc/pivottable/overview#/fluent2
📚 Official Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/pivot-table/getting-started

🔍 Overview

This repository provides a production-ready starter template for integrating Syncfusion's powerful PivotView (Pivot Table) component into your ASP.NET MVC 5 applications. It demonstrates essential features for building interactive, data-driven reporting solutions with minimal configuration.

🎯 What Problem Does This Solve?

Modern business applications require sophisticated data analysis and reporting capabilities. Syncfusion's Pivot Table component provides:

Interactive data analysis without complex backend logic
Multi-dimensional data visualization with drag-and-drop functionality
Real-time data pivoting and aggregation
Professional data formatting for currency, percentages, and custom formats
End-user customization through intuitive UI components

✨ Key Features

Feature	Description	Benefit
🎯 Field List Interface	Dynamically add, remove, and rearrange data fields at runtime	Empowers end-users to customize reports without code modifications
📊 Grouping Bar	Drag-and-drop fields between rows, columns, values, and filters	Intuitive data organization and real-time pivot manipulation
🧮 Calculated Fields	Create custom formulas combining multiple data fields	Advanced data analysis and custom metrics computation
💱 Data Formatting	Display values in currency, percentages, and custom formats	Professional presentation of numerical data
↕️ Multi-Level Sorting	Sort by multiple fields with ascending/descending control	Enhanced data exploration and insights discovery
🔗 Advanced Filtering	Filter by single or multiple criteria across all dimensions	Focused data analysis and drill-down exploration
📈 Aggregation Functions	Sum, Average, Count, Min, Max, and custom aggregations	Flexible data summarization strategies
📱 Responsive Design	Adapts seamlessly to desktop, tablet, and mobile screens	Universal accessibility across devices
🎨 Theme Support	Multiple Bootstrap and Tailwind themes available	Consistent branding and visual customization
⚡ CDN & Local Support	Flexible resource loading from CDN or local packages	Optimized performance and offline capabilities

📋 Prerequisites

Before you begin, ensure you have the following installed:

Visual Studio 2019 or later (Community, Professional, or Enterprise)
.NET Framework 4.7.2 or higher
NuGet Package Manager (included with Visual Studio)
Microsoft ASP.NET MVC 5.3.0 or compatible version
Basic knowledge of ASP.NET MVC, C#, and Razor syntax

🧭 Quick Start

Step 1: Clone or Download the Repository

git clone https://github.com/SyncfusionExamples/aspnet-mvc-pivot-table-getting-started
cd aspnet-mvc-pivot-table-getting-started

Step 2: Open the Project in Visual Studio

Launch Visual Studio 2019 or later
Select File → Open → Project/Solution
Navigate to the repository folder and select PivotTableSample.sln

Step 3: Restore NuGet Packages

Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution
Click Restore to download all dependencies
Verify the following key packages are installed:
- Syncfusion.EJ2.MVC5 (v32.1.25+)
- Syncfusion.EJ2.JavaScript (v32.1.25+)
- Microsoft.AspNet.Mvc (v5.3.0+)

Step 4: Build and Run the Application

Press Ctrl + Shift + B to build the solution
Press Ctrl + F5 (or F5 with debugging) to run the application
The application will open in your default browser at https://localhost:<port>
You should see the Pivot Table component displaying sample sales data

✅ First Success Checkpoint

When running successfully, you'll see:

📊 A Pivot Table with sales data organized by Country and Products
📈 Data aggregated by Quarter and Year columns
💰 Values displaying Sold units and Amount with currency formatting
🎨 Professional styling with Bootstrap 5 theme

🗂️ Project Structure

aspnet-mvc-pivot-table-getting-started/
│
├── 📄 PivotTableSample.sln                 # Solution file
├── 📄 PivotTableSample.csproj              # Project configuration
├── 📄 packages.config                      # NuGet dependencies
├── 📄 Web.config                           # Application configuration
├── 📄 Global.asax                          # Application startup
│
├── 📁 App_Start/
│   ├── BundleConfig.cs                     # CSS/JS bundling configuration
│   ├── FilterConfig.cs                     # Global filters
│   └── RouteConfig.cs                      # URL routing rules
│
├── 📁 Controllers/
│   └── HomeController.cs                   # Main controller with PivotData
│
├── 📁 Views/
│   ├── _ViewStart.cshtml                   # Layout initialization
│   ├── Web.config                          # View-specific configuration
│   ├── Shared/
│   │   ├── _Layout.cshtml                  # Master layout template
│   │   └── Error.cshtml                    # Error page
│   └── Home/
│       ├── Index.cshtml                    # Pivot Table view
│       ├── About.cshtml                    # About page
│       └── Contact.cshtml                  # Contact page
│
├── 📁 Content/
│   ├── Site.css                            # Custom styles
│   ├── bootstrap*.css                      # Bootstrap framework styles
│   └── ej2/                                # Syncfusion EJ2 theme files
│
├── 📁 Scripts/
│   ├── jquery-3.7.0.js                     # jQuery library
│   ├── bootstrap.bundle.js                 # Bootstrap JavaScript
│   └── ej2/                                # Syncfusion EJ2 scripts
│
└── 📁 Properties/
    └── AssemblyInfo.cs                     # Assembly metadata

🔑 Key Files Explained

File	Purpose
HomeController.cs	Contains `PivotData` class with sample sales data and `Index()` action returning data to view
Index.cshtml	Razor view that initializes and configures the PivotView component
_Layout.cshtml	Master layout with Syncfusion script manager and CDN resources
BundleConfig.cs	Configures CSS and JavaScript bundling for production optimization
Web.config	Application settings, connection strings, and Syncfusion namespace configuration

🎨 Theming & Styling

Available Themes

Syncfusion EJ2 supports multiple professional themes. To change the theme, update the theme link in ~/Views/Shared/_Layout.cshtml:

<!-- Default: Tailwind CSS -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.25/tailwind.css" />

<!-- Alternative: Bootstrap 5 Theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.25/bootstrap5.css" />

<!-- Alternative: Material Theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.25/material.css" />

<!-- Alternative: Fluent Theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.25/fluent.css" />

<!-- Alternative: Fabric Theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.25/fabric.css" />

Custom Styling

To customize Pivot Table appearance, add CSS to ~/Content/Site.css:

/* Custom Pivot Table styling */
.e-pivot-table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.e-pivot-table .e-rowsheader {
    background-color: #f5f5f5;
    border-right: 1px solid #e0e0e0;
}

.e-pivot-table .e-value {
    text-align: right;
    padding-right: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .e-pivot-table {
        font-size: 12px;
    }
}

🧩 Configuration & Customization

Configuring the Pivot Table

The Pivot Table is configured in ~/Views/Home/Index.cshtml through the PivotViewDataSourceSettings class:

@Html.EJS().PivotView("PivotTable")
    .DataSourceSettings(new PivotViewDataSourceSettings()
    {
        DataSource = (IEnumerable<dynamic>)ViewBag.DataSource,
        ExpandAll = false,
        EnableSorting = true,
        EnablePaging = false,
        Rows = new List<PivotViewRow>()
        {
            new PivotViewRow { Name = "Country", Caption = "Country" },
            new PivotViewRow { Name = "Products", Caption = "Products" }
        },
        Columns = new List<PivotViewColumn>()
        {
            new PivotViewColumn { Name = "Year", Caption = "Year" },
            new PivotViewColumn { Name = "Quarter", Caption = "Quarter" }
        },
        Values = new List<PivotViewValue>()
        {
            new PivotViewValue { Name = "Sold", Caption = "Sold", Type = SummaryTypes.Sum },
            new PivotViewValue { Name = "Amount", Caption = "Amount", Type = SummaryTypes.Sum }
        },
        Filters = new List<PivotViewFilter>()
    })
    .ShowGroupingBar(true)
    .ShowFieldList(true)
    .AllowCalculatedField(true)
    .Height("auto")
    .Render()

Key Configuration Properties

Property	Type	Description
DataSource	`IEnumerable<dynamic>`	Collection of data objects to analyze
Rows	`List<PivotViewRow>`	Fields displayed in row axis
Columns	`List<PivotViewColumn>`	Fields displayed in column axis
Values	`List<PivotViewValue>`	Fields displayed as aggregated values
Filters	`List<PivotViewFilter>`	Fields used for filtering data
ShowGroupingBar	`bool`	Enable/disable drag-and-drop grouping bar
ShowFieldList	`bool`	Enable/disable field list panel
AllowCalculatedField	`bool`	Allow users to create calculated fields
EnableSorting	`bool`	Enable sorting functionality
Height	`string`	Container height (e.g., "600px", "auto")

Adding Format Settings

To format value fields (e.g., currency), add FormatSettings:

.FormatSettings(new List<PivotViewFormatSetting>()
{
    new PivotViewFormatSetting { Name = "Amount", Format = "C" },
    new PivotViewFormatSetting { Name = "Sold", Format = "N0" }
})

Format codes:

"C" = Currency
"N" = Number
"P" = Percentage
"d" = Date
"N2" = Number with 2 decimal places

🤝 Contributing

We welcome contributions! To contribute:

Fork the repository
Create a feature branch: git checkout -b feature/your-feature-name
Commit your changes: git commit -m 'Add your feature'
Push to the branch: git push origin feature/your-feature-name
Submit a Pull Request

Code Style Guidelines

Use PascalCase for class and method names
Use camelCase for variable names
Add XML documentation comments for public methods
Follow Microsoft C# Coding Conventions
Ensure no merge conflicts before submitting PR

📜 License & Support

License

This project is licensed under the Syncfusion Essential Studio Community License or Commercial License. Ensure you have appropriate licensing for your use case.

Commercial License: Contact sales@syncfusion.com

📄 Full License Agreement: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

Support Resources

📚 Official Documentation: ASP.NET MVC Pivot Table Guide
🎥 Video Tutorials: Syncfusion YouTube Channel
💬 Community Forums: Syncfusion Forums
🐛 Issue Tracker: GitHub Issues
📧 Email Support: support@syncfusion.com

System Requirements

Visual Studio: 2019 or later
.NET Framework: 4.7.2 or later
ASP.NET MVC: 5.0 or later
Browser Support: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

🎓 Learning Resources

Getting Started Guide: Official Tutorial
API Reference: Pivot Table API Docs
Code Samples: Syncfusion Examples Repository
Blog Articles: Syncfusion Blog - ASP.NET MVC

🌟 Highlights

✅ Production-Ready — Complete, tested, and ready for real-world applications
✅ Well-Documented — Comprehensive comments and inline explanations
✅ Sample Data Included — Pre-populated with meaningful sales data
✅ Best Practices — Follows ASP.NET MVC and Syncfusion conventions
✅ Responsive Design — Works seamlessly on desktop, tablet, and mobile
✅ Easy to Extend — Clear structure for adding custom functionality

📞 Connect With Us

Twitter: @Syncfusion
LinkedIn: Syncfusion
Facebook: Syncfusion
Website: Syncfusion.com

Made with ❤️ by Syncfusion | Explore More Components

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
App_Start		App_Start
Content		Content
Controllers		Controllers
Properties		Properties
Scripts		Scripts
Views		Views
Global.asax		Global.asax
Global.asax.cs		Global.asax.cs
PivotTableSample.csproj		PivotTableSample.csproj
PivotTableSample.sln		PivotTableSample.sln
README.md		README.md
Web.Debug.config		Web.Debug.config
Web.Release.config		Web.Release.config
Web.config		Web.config
favicon.ico		favicon.ico
packages.config		packages.config

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

📊 Getting Started — ASP.NET MVC Pivot Table Component (Syncfusion EJ2)

📑 Table of Contents

🔍 Overview

🎯 What Problem Does This Solve?

✨ Key Features

📋 Prerequisites

🧭 Quick Start

Step 1: Clone or Download the Repository

Step 2: Open the Project in Visual Studio

Step 3: Restore NuGet Packages

Step 4: Build and Run the Application

✅ First Success Checkpoint

🗂️ Project Structure

🔑 Key Files Explained

🎨 Theming & Styling

Available Themes

Custom Styling

🧩 Configuration & Customization

Configuring the Pivot Table

Key Configuration Properties

Adding Format Settings

🤝 Contributing

Code Style Guidelines

📜 License & Support

License

Support Resources

System Requirements

🎓 Learning Resources

🌟 Highlights

📞 Connect With Us

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages