This article provides a step-by-step introduction to configure Syncfusion Blazor setup, build and run a simple Blazor WebAssembly application using .NET Core CLI.
Note: Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this help topic for more information.
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
dotnet new blazorwasm -o WebApplication1
cd WebApplication1
dotnet add package Syncfusion.Blazor -v 18.4.0.42
dotnet restore
Syncfusion.Blazor
.@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
using Syncfusion.Blazor;
namespace WebApplication1
{
public class Program
{
public static async Task Main(string[] args)
{
....
....
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
}
}
}
<head>
element of the ~/wwwroot/index.html page.<head>
....
....
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>
Note: The same theme file can be referred through the CDN version by using
https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css
. To use manual scripts other than the scripts from NuGet package, register the Blazor service in ~/Program.cs file by using true parameter as mentioned below.
using Syncfusion.Blazor;
namespace WebApplication1
{
public class Program
{
public static async Task Main(string[] args)
{
....
....
builder.Services.AddSyncfusionBlazor(true);
await builder.Build.RunAsync();
}
}
}
To initialize the DataGrid component add the below code to your Index.razor view page which is present under ~/Pages folder. For example, the DataGrid component is added in the ~/Pages/Index.razor page.
<SfGrid >
</SfGrid>
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 lifecycle of the page.
<SfGrid DataSource="@gridData">
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
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
to map with a property name an array of JavaScript objects.HeaderText
to change the title of columns.TextAlign
to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define TextAlign
as Right
.Format
. Using this, we can format number and date values to standard or custom formats.<SfGrid DataSource="@gridData">
<GridColumns>
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
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="@gridData" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
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="@gridData" AllowPaging="true" AllowSorting="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
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="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
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="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<OrdersDetails> gridData { get; set; }
protected override void OnInitialized()
{
gridData = OrdersDetails.GetAllRecords();
}
}
Output be like the below.