KesavaViky 31.0.0

Syncfusion® Blazor DataGrid

High-performance DataGrid for Blazor applications. Display, edit, and manage tabular data from IEnumerable, OData, or remote sources with built-in paging, sorting, filtering, grouping, and virtualization.

Using this package with an AI coding agent

Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:

Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.

Platform reference: https://ai.syncfusion.com/wpf/llms.txt

Key Features

• Fast rendering with virtualization and row/column virtualization
• Sorting, filtering, grouping, and searching capabilities
• Inline, batch, and dialog editing modes
• Template columns, column resizing, reordering, and freezing
• Excel and PDF export (requires additional Syncfusion export packages)
• Keyboard navigation, accessibility, and RTL support
• Responsive design with mobile touch optimization

System Requirements

• .NET 8.0 or later (Blazor Server, Blazor Web App, Blazor WebAssembly, Blazor Hybrid)
• See full requirements: System Requirements

Add Stylesheet and Script References

For Blazor Web App / Blazor Server, add these to Components/App.razor or App.razor. For Blazor WebAssembly, add these to wwwroot/index.html:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Grid/scripts/sf-grid.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the DataGrid component to your Razor page:

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridColumns>
        <GridColumn Field="OrderID" HeaderText="Order ID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="CustomerName" HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field="OrderDate" HeaderText="Order Date" Width="130" Format="d" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="Freight" HeaderText="Freight" Width="120" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    private List<Order> Orders = new List<Order>
    {
        new Order { OrderID = 10248, CustomerName = "VINET", OrderDate = new DateTime(2023, 7, 4), Freight = 32.38 },
        new Order { OrderID = 10249, CustomerName = "TOMSP", OrderDate = new DateTime(2023, 7, 5), Freight = 11.61 },
        new Order { OrderID = 10250, CustomerName = "HANAR", OrderDate = new DateTime(2023, 7, 8), Freight = 65.83 }
    };

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerName { get; set; }
        public DateTime OrderDate { get; set; }
        public double Freight { get; set; }
    }
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET