Search results

Getting Started with Essential JS 2 for Blazor server-side in Visual Studio 2019 Preview

This article provides a step-by-step introduction to create Blazor application add Syncfusion Razor component packages to the application. It also include initializing Grid Razor component and usage of features such as paging, sorting, filtering and grouping using the Visual Studio 2019 Preview.

Prerequisites

The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the .NET Core Razor components documentation website.

Create Blazor Application

Step 1: Choose File > New > Project… in the Visual Studio menu bar.

new project in aspnetcore razor

Step 2: Configure your new project in ASP.NET Core WebApplication and give your Project name.

configure project

Step 3: Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

select framework in top

Step 4: Choose the Razor components template and then click Create.

select framework

Adding Syncfusion packages

Step 1: Now, add the Syncfusion.EJ2.Blazor NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

nuget explorer

Step 2: Search the Syncfusion.EJ2.Blazor keyword in the Browse tab and install Syncfusion.EJ2.Blazor NuGet package in the application.

select nuget

Step 3: The Essential JS 2 package will be included in the project, after the installation process is completed.

Step 4: Open ~/_Imports.razor file and import the Syncfusion.EJ2.Blazor.

        @using Syncfusion.EJ2.Blazor
        @using Syncfusion.EJ2.Blazor.Grids

Adding Scripts and CSS reference

You can add the client-side resources through CDN in the <head> element of the ~/Pages/_Host.cshtml page.

    <head>
        <environment include="Development">
            <link href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" />
            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
            <script src="https://cdn.syncfusion.com/ej2/dist/ejs.interop.min.js"></script>
        </environment>
    </head>

Add Grid Component

To initialize the Grid component add the below code to your Index.razor view page which is present under ~/Pages folder.

<EjsGrid >

</EjsGrid>

Defining Row Data

To bind data for the Grid 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.

<EjsGrid DataSource="@gridData">

</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

Defining Columns

The columns are automatically generated when columns declaration is empty or undefined while initializing the grid.

The Grid 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:

  • We have added Field to map with a property name an array of JavaScript objects.
  • We have added HeaderText to change the title of columns.
  • We have used 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.
  • Also, we have used another useful property, Format. Using this, we can format number and date values to standard or custom formats.
<EjsGrid 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="yMd" 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>
</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

Enable Paging

The paging feature enables users to view the grid record in a paged view. It can be enabled by setting the AllowPaging property to true. Pager can be customized using the GridPageSettings component.

<EjsGrid 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="yMd" 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>
</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

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.

<EjsGrid 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="yMd" 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>
</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

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 FilterSettings property.

<EjsGrid 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="yMd" 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>
</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

Enable Grouping

The grouping feature enables you to view the grid 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.

<EjsGrid 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="yMd" 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>
</EjsGrid>

@code{
    public List<OrdersDetails> gridData { get; set; }
    protected override void OnInitialized()
    {
        gridData = OrdersDetails.GetAllRecords();
    }
}

Output be like the below.

final output

See Also