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" DataSource="@treedata" ChildMapping="Children" TreeColumnIndex="1">
    <TreeGridColumns>
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
        <TreeGridColumn Field="Approved" HeaderText="Approved" Width="100" DisplayAsCheckBox="true"></TreeGridColumn>
    </TreeGridColumns>
    </EjsTreeGrid>

    @functions{

        public List<TreeData.BusinessObject> treedata { get; set; }

        protected override void OnInit()
        {
            this.treedata = TreeData.GetDefaultData().ToList();
        }
    }

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" DataSource="@treedata" ChildMapping="Children" TreeColumnIndex="1" AllowPaging="true" PageSettings="@treepage">
    <TreeGridColumns>
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
        <TreeGridColumn Field="Approved" HeaderText="Approved" Width="100" DisplayAsCheckBox="true"></TreeGridColumn>
    </TreeGridColumns>
    </EjsTreeGrid>

    @functions{

        public List<TreeData.BusinessObject> treedata { get; set; }

        public TreeGridPageSettings treepage { get; set; }

        protected override void OnInit()
        {
            this.treedata = TreeData.GetDefaultData().ToList();
            this.treepage = new TreeGridPageSettings() { PageSizes = true, PageSize = 10, PageCount = 4, PageSizeMode = PageSizeMode.All };
        }
    }

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" DataSource="@treedata" ChildMapping="Children" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
    <TreeGridColumns>
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
        <TreeGridColumn Field="Approved" HeaderText="Approved" Width="100" DisplayAsCheckBox="true"></TreeGridColumn>
    </TreeGridColumns>
    </EjsTreeGrid>

    @functions{

        public List<TreeData.BusinessObject> treedata { get; set; }

        protected override void OnInit()
        {
            this.treedata = TreeData.GetDefaultData().ToList();
        }
    }

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" DataSource="@treedata" ChildMapping="Children" TreeColumnIndex="1" AllowPaging="true" AllowFiltering="true" FilterSettings="@filter">
    <TreeGridColumns>
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
        <TreeGridColumn Field="Approved" HeaderText="Approved" Width="100" DisplayAsCheckBox="true"></TreeGridColumn>
    </TreeGridColumns>
    </EjsTreeGrid>

    @functions{

        public List<TreeData.BusinessObject> treedata { get; set; }

        public TreeGridFilterSettings filter { get; set; }

        protected override void OnInit()
        {
            this.treedata = TreeData.GetDefaultData().ToList();
            this.filter = new TreeGridFilterSettings() { HierarchyMode = FilterHierarchyMode.Parent, Type = Syncfusion.EJ2.RazorComponents.TreeGrid.FilterType.FilterBar, Mode = FilterBarMode.Immediate };
        }
    }