Blazor DataGrid Component in WebAssembly App using CLI
10 Feb 202313 minutes to read
This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using the .NET CLI.
Prerequisites
Latest version of the .NET Core SDK. If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
dotnet --version
Create a Blazor WebAssembly project using .NET CLI
Install the Blazor project templates by using below command line in the command prompt.
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
Run the dotnet new blazorwasm
command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
For a hosted Blazor WebAssembly experience, add the hosted option (-ho or –hosted) to the command.
dotnet new blazorwasm -o BlazorApp -ho
NOTE
If you have installed multiple SDK versions and need any specific framework version (net5.0/netcoreapp3.1) project, then add -f flag along with dotnet new blazorwasm comment. Refer here for the available options.
Install Syncfusion Blazor packages in the App
Install Syncfusion Blazor packages in the App.
Syncfusion Blazor components are available in nuget.org. To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to NuGet packages topic for available NuGet packages list with component details.
Add Syncfusion.Blazor.Grid
NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See Install and manage packages using the dotnet CLI topics for more details.
dotnet add package Syncfusion.Blazor.Grid --version 21.1.35
dotnet restore
Register Syncfusion Blazor Service
Open ~/_Imports.razor file and import the Syncfusion.Blazor
namespace.
@using Syncfusion.Blazor
Now, Open ~/Program.cs file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting IgnoreScriptIsolation property as true to load the scripts externally in the next steps.
NOTE
From 2022 Vol-1 (20.1) version, the default value of
IgnoreScriptIsolation
is changed totrue
. It is not necessary to set theIgnoreScriptIsolation
property to refer scripts externally, since the default value has already been changed to true, and this property is obsolete.
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....
using Syncfusion.Blazor;
namespace BlazorApp
{
public class Program
{
public static async Task Main(string[] args)
{
....
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
}
}
}
Add style sheet
Checkout the Blazor Themes topic to learn different ways (Static Web Assets, CDN and CRG) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using Static Web Assets.
To add theme to the app, Add Syncfusion.Blazor.Themes
NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the NuGet package.
dotnet add package Syncfusion.Blazor.Themes --version 21.1.35
dotnet restore
Then the theme style from can be referred inside the <head>
of the wwwroot/index.html file in client web app.
<head>
...
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
Add script reference
Checkout Adding Script Reference topic to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using Static Web Assets externally inside the <head>
of wwwroot/index.html file in client web app.
<head>
...
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
NOTE
Syncfusion recommends to reference scripts using Static Web Assets, CDN and CRG by disabling JavaScript isolation for better loading performance of the Blazor application.
Add Blazor DataGrid component
- Open ~/_Imports.razor file or any other page under the
~/Pages
folder where the component is to be added and import the Syncfusion.Blazor.Grids namespace.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
- Now, add the Syncfusion DataGrid component in razor file. Here, the DataGrid component is added in the ~/Pages/Index.razor file under the ~/Pages folder.
<SfGrid DataSource="@Orders" />
@code{
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 5).Select(x => new Order()
{
OrderID = 0 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
}
}
- In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on
http://localhost:<port number>
and view it in the browser.
dotnet run
NOTE
You need to include a valid license key (either paid or trial key) within your applications. Refer to this help topic for more information.
Defining row data
To bind data for the DataGrid component, you can assign a IEnumerable object to the dataSource property. The list data source can also be provided as an instance of the DataManager
. You can assign the data source through the OnInitialized
life cycle of the page.
<SfGrid DataSource="@Orders" />
@code{
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
Defining columns
The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid.
The DataGrid has an option to define columns using GridColumns component. In GridColumn
component we have properties to customize columns.
Let’s check the properties used here:
- Field is added to map with a property name an array of JavaScript objects.
- HeaderText is added to change the title of columns.
-
TextAlign is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define
TextAlign
asRight
. - Also, we have used another useful property, Format. Using this, you can format number and date values to standard or custom formats.
<SfGrid DataSource="@Orders">
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
Enable paging
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the AllowPaging property to true. Pager can be customized using the GridPageSettings component.
<SfGrid DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
Enable sorting
The sorting feature enables you to order the records. It can be enabled by setting the AllowSorting property as true. Sorting feature can be customized using the GridSortSettings component.
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
Enable filtering
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the AllowFiltering property as true. Filtering feature can be customized using the GridFilterSettings component.
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
Enable grouping
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the AllowGrouping property as true. Grouping feature can be customized using the GridGroupSettings component.
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>