ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor TreeGrid Component in Visual Studio 2019

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor TreeGrid Component web application using the Visual Studio 2019.

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 a TreeGrid Component in Blazor application from VS 2019

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

    new project in aspnetcore razor

  2. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

    select framework

  3. Choose the Blazor template and change the application name, and then click OK.

Importing Essential JS 2 Razor components in the application

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

    nuget explorer

  2. Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.

    select nuget

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

  4. Open ~/Imports.razor file and import the Syncfusion.EJ2.RazorComponents and Syncfusion.EJ2.RazorComponents.TreeGrid.

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.TreeGrid
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

    import cdn

  6. Now, add the Syncfusion Essential JS 2 TreeGrid component in any web page (razor) in the Pages folder. For example, the TreeGrid component is added in the ~/Pages/Index.razor page.

    <EjsTreeGrid ID="treegrid" ref="treeGrid" ChildMapping="Children" TreeColumnIndex="1" DataSource="@treedata" Columns="@treecolumns"></EjsTreeGrid>

    @functions{

    EjsTreeGrid treeGrid;

    public object treecolumns { get; set; }

    public object treedata { get; set; }

    public List<object> columns { get; set; } = new List<object>
    {
       new { field = "TaskId", headerText = "Task ID", width = 60, textAlign = "Right" },
       new { field = "TaskName", headerText = "Task Name", width = 120 },
       new { field = "StartDate", headerText = "Start Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "EndDate", headerText = "End Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "Duration", headerText = "Duration", width = 80, textAlign = "Right" },
       new { field = "Priority", headerText = "Priority", width = 80 },
    };

    protected override void OnAfterRender()
    {
       treecolumns = this.treeGrid.Columns = columns;
       treedata = this.treeGrid.DataSource = TreeData.GetDefaultData();
    }
 }

In the above code example, the hierarchical data binding is represented in which the [ChilMapping] property denotes the hierarchy relationship; whereas in self-referencing data binding [IdMapping] and [ParentIdMapping] denotes the hierarchy relationship.

Enable paging

The paging feature enables users to view the treegrid record in a paged view. It can be enabled by setting the [AllowPaging] property to true. The pager can be customized using the [PageSettings] property.

In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode] property.

    <EjsTreeGrid ID="treegrid" ref="treeGrid" ChildMapping="Children" TreeColumnIndex="1"  DataSource="@treedata" Columns="@treecolumns" AllowPaging="true" PageSettings="@treepage">
    </EjsTreeGrid>

    @functions{

    EjsTreeGrid treeGrid;

    public object treecolumns { get; set; }

    public object treedata { get; set; }

    public object treepage { get; set; }

    public List<object> columns { get; set; } = new List<object>
    {
       new { field = "TaskId", headerText = "Task ID", width = 60, textAlign = "Right" },
       new { field = "TaskName", headerText = "Task Name", width = 120 },
       new { field = "StartDate", headerText = "Start Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "EndDate", headerText = "End Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "Duration", headerText = "Duration", width = 80, textAlign = "Right" },
       new { field = "Priority", headerText = "Priority", width = 80 },
    };

    public object pageSettings = new { pageSizes=true, pageSize="10", pageCount="4" };

    protected override void OnAfterRender()
    {
       treecolumns = this.treeGrid.Columns = columns;
       treedata = this.treeGrid.DataSource = TreeData.GetDefaultData();
       treepage = this.treeGrid.PageSettings = pageSettings;
    }
 }

Enable sorting

The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting] property to true. Sorting feature can be customized using the [SortSettings] property.

    <EjsTreeGrid ID="treegrid" ref="treeGrid" ChildMapping="Children" TreeColumnIndex="1" DataSource="@treedata" Columns="@treecolumns" AllowPaging="true" AllowSorting="true"></EjsTreeGrid>

    @functions{

    EjsTreeGrid treeGrid;

    public object treecolumns { get; set; }

    public object treedata { get; set; }

    public List<object> columns { get; set; } = new List<object>
    {
       new { field = "TaskId", headerText = "Task ID", width = 60, textAlign = "Right" },
       new { field = "TaskName", headerText = "Task Name", width = 120 },
       new { field = "StartDate", headerText = "Start Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "EndDate", headerText = "End Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "Duration", headerText = "Duration", width = 80, textAlign = "Right" },
       new { field = "Priority", headerText = "Priority", width = 80 },
    };

    protected override void OnAfterRender()
    {
       treecolumns = this.treeGrid.Columns = columns;
       treedata = this.treeGrid.DataSource = TreeData.GetDefaultData();
    }
 }

Enable filtering

The filtering feature enables you to view the reduced amount of records based on the filter criteria. It can be enabled by setting the [AllowFiltering] property to true. Filtering feature can be customized using the [FilterSettings] property.

By default, filtered records are shown along with its parent records. This behavior can be changed by using the [FilterSettings-HierarchyMode] property.

    <EjsTreeGrid ID="treegrid" ref="treeGrid" AllowPaging="true" ChildMapping="Children" TreeColumnIndex="1" DataSource="@treedata" Columns="@treecolumns" AllowFiltering="true" FilterSettings="@filter"></EjsTreeGrid>

    @functions{

    EjsTreeGrid treeGrid;

    public object treedata { get; set; }

    public object treecolumns { get; set; }

    public object filter { get; set; }

    public List<object> columns { get; set; } = new List<object>
    {
       new { field = "TaskId", headerText = "Task ID", width = 80, textAlign = "Right" },
       new { field = "TaskName", headerText = "Task Name", width = 120 },
       new { field = "StartDate", headerText = "Start Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "EndDate", headerText = "End Date", width = 90, textAlign = "Right", type = "date", format = "yMd" },
       new { field = "Duration", headerText = "Duration", width = 80, textAlign = "Right" },
       new { field = "Priority", headerText = "Priority", width = 80 },
    };

    public object filterSettings = new { type = "FilterBar", hierarchyMode = "Parent", mode="Immediate" };

    protected override void OnAfterRender()
    {
        treecolumns = this.treeGrid.Columns = columns;
        treedata = this.treeGrid.DataSource = TreeData.GetDefaultData();
        filter = this.treeGrid.FilterSettings = filterSettings;
    }
}