Adding Blazor TreeGrid Column Template sample

App.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly">
+ <Found Context="routeData">
+ <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+ </Found>
+ <NotFound>
+ <LayoutView Layout="@typeof(MainLayout)">
+ <p>Sorry, there's nothing at this address.</p>
+ </LayoutView>
+ </NotFound>
+</Router>

Models/Employee.cs

@@ -0,0 +1,149 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace MyBlazorProject.Models
+{
+ public class Employee
+ {
+ public string Name { get; set; }
+ public string FullName { get; set; }
+ public DateTime DOB { get; set; }
+ public string Designation { get; set; }
+ public string EmpID { get; set; }
+ public int? EmployeeID { get; set; }
+ public string Country { get; set; }
+ public string Address { get; set; }
+ public string Contact { get; set; }
+ public int? ParentId { get; set; }
+ public string Confirmed { get; set; }
+ public static List<Employee> GetTemplateData()
+ {
+ List<Employee> DataCollection = new List<Employee>();
+ DataCollection.Add(new Employee
+ {
+ Name = "Robert King",
+ FullName = "RobertKing",
+ Designation = "Chief Executive Officer",
+ EmployeeID = 1,
+ EmpID = "EMP001",
+ Address = "507 - 20th Ave. E.Apt. 2A, Seattle",
+ Contact = "(206) 555-9857",
+ Country = "USA",
+ DOB = new DateTime(1963, 2, 15),
+ ParentId = null,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "David william",
+ FullName = "DavidWilliam",
+ Designation = "Vice President",
+ EmployeeID = 2,
+ EmpID = "EMP004",
+ Address = "722 Moss Bay Blvd., Kirkland",
+ Contact = "(206) 555-3412",
+ Country = "USA",
+ DOB = new DateTime(1971, 5, 20),
+ ParentId = 1,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Nancy Davolio",
+ FullName = "NancyDavolio",
+ Designation = "Marketing Executive",
+ EmployeeID = 3,
+ EmpID = "EMP035",
+ Address = "4110 Old Redmond Rd., Redmond",
+ Contact = "(206) 555-8122",
+ Country = "USA",
+ DOB = new DateTime(1966, 3, 19),
+ ParentId = 1,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Andrew Fuller",
+ FullName = "AndrewFuller",
+ Designation = "Sales Representative",
+ EmployeeID = 4,
+ EmpID = "EMP045",
+ Address = "14 Garrett Hill, London",
+ Contact = "(71) 555-4848",
+ Country = "UK",
+ DOB = new DateTime(1980, 9, 20),
+ ParentId = 1,
+ Confirmed = "No"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Anne Dodsworth",
+ FullName = "AnneDodsworth",
+ Designation = "Sales Representative",
+ EmployeeID = 5,
+ EmpID = "EMP091",
+ Address = "4726 - 11th Ave. N.E., Seattle",
+ Contact = "(206) 555-1189",
+ Country = "USA",
+ ParentId = null,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Michael Suyama",
+ FullName = "MichaelSuyama",
+ Designation = "Sales Representative",
+ EmployeeID = 6,
+ EmpID = "EMP110",
+ Address = "Coventry House Miner Rd., London",
+ Contact = "(71) 555-3636",
+ Country = "UK",
+ ParentId = 5,
+ Confirmed = "No"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Janet Leverling",
+ FullName = "JanetLeverling",
+ Designation = "Sales Coordinator",
+ EmployeeID = 7,
+ EmpID = "EMP131",
+ Address = "Edgeham Hollow Winchester Way, London",
+ Contact = "(71) 555-3636",
+ Country = "UK",
+ ParentId = 5,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Romey Wilson",
+ FullName = "RomeyWilson",
+ Designation = "Sales Executive",
+ EmployeeID = 8,
+ EmpID = "EMP039",
+ Address = "7 Houndstooth Rd., London",
+ Contact = "(71) 555-3690",
+ Country = "UK",
+ DOB = new DateTime(1980, 2, 2),
+ ParentId = null,
+ Confirmed = "Yes"
+ });
+ DataCollection.Add(new Employee
+ {
+ Name = "Margaret Peacock",
+ FullName = "MargaretPeacock",
+ Designation = "Sales Representative",
+ EmployeeID = 9,
+ EmpID = "EMP213",
+ Address = "4726 - 11th Ave. N.E., California",
+ Contact = "(206) 555-1989",
+ Country = "USA",
+ ParentId = 8,
+ Confirmed = "No"
+ });
+ return DataCollection;
+ }
+ }
+}

MyBlazorProject.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+ <PropertyGroup>
+ <TargetFramework>netstandard2.1</TargetFramework>
+ <RazorLangVersion>3.0</RazorLangVersion>
+ </PropertyGroup>
+
+ <ItemGroup>
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
+ <PackageReference Include="Syncfusion.Blazor.TreeGrid" Version="19.2.0.44" />
+ <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
+ </ItemGroup>
+
+</Project>

MyBlazorProject.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.31402.337
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyBlazorProject", "MyBlazorProject.csproj", "{0EB63CD8-CC4A-41AB-8F72-CA3E9AFE039B}"
+EndProject
+Global
+GlobalSection(SolutionConfigurationPlatforms) = preSolution
+Debug|Any CPU = Debug|Any CPU
+Release|Any CPU = Release|Any CPU
+EndGlobalSection
+GlobalSection(ProjectConfigurationPlatforms) = postSolution
+{0EB63CD8-CC4A-41AB-8F72-CA3E9AFE039B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+{0EB63CD8-CC4A-41AB-8F72-CA3E9AFE039B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+{0EB63CD8-CC4A-41AB-8F72-CA3E9AFE039B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+{0EB63CD8-CC4A-41AB-8F72-CA3E9AFE039B}.Release|Any CPU.Build.0 = Release|Any CPU
+EndGlobalSection
+GlobalSection(SolutionProperties) = preSolution
+HideSolutionNode = FALSE
+EndGlobalSection
+GlobalSection(ExtensibilityGlobals) = postSolution
+SolutionGuid = {393A8AA1-DC01-4E72-B0A0-81873BB69657}
+EndGlobalSection
+EndGlobal

Pages/Index.razor

@@ -0,0 +1,57 @@
+@page "/"
+@using MyBlazorProject.Models;
+@using Syncfusion.Blazor.Buttons;
+@inject Microsoft.AspNetCore.Components.NavigationManager URIHelper;
+<style>
+ @@font-face {
+ font-family: 'empicon';
+ src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+ .e-treegrid .e-icon-userlogin::before {
+ font-family: 'empicon';
+ width: 15px;
+ content: '\e702';
+ padding-right: 12px;
+ }
+ img{
+ height:60px;
+ width:60px;
+ vertical-align: baseline;
+ }
+</style>
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="EmployeeID" ParentIdMapping="ParentId" TreeColumnIndex="0">
+ <TreeGridColumns>
+ <TreeGridColumn Field="EmpID" Width="160">
+ <HeaderTemplate>
+ <span class="e-icon-userlogin e-icons">ID</span>
+ </HeaderTemplate>
+ </TreeGridColumn>
+ <TreeGridColumn HeaderText="Employee Image" Width="140">
+ <Template>
+ @{ 
+ var employeeDetails = (context as Employee);
+ <img src="@URIHelper.ToAbsoluteUri($"images/{employeeDetails.EmpID}.png")" alt="employeeDetails.EmpID"/>
+ }
+ </Template>
+ </TreeGridColumn>
+ <TreeGridColumn Field="Name" HeaderText="Employee Name" Width="160"></TreeGridColumn>
+ <TreeGridColumn Field="Address" HeaderText="Employee Details" Width="330"></TreeGridColumn>
+ <TreeGridColumn Field="Designation" HeaderText="Designation" Width="170"></TreeGridColumn>
+ <TreeGridColumn Field="Country" HeaderText="Country"></TreeGridColumn>
+ <TreeGridColumn HeaderText="Confirmed" TextAlign="TextAlign.Center" Width="100">
+ <Template>
+ <SfCheckBox Checked="@((context as Employee).Confirmed == "Yes")"></SfCheckBox>
+ </Template>
+ </TreeGridColumn>
+ </TreeGridColumns>
+</SfTreeGrid>
+
+@code{
+ public IEnumerable<Employee> TreeGridData { get; set; }
+ protected override void OnInitialized()
+ {
+ this.TreeGridData = Employee.GetTemplateData();
+ }
+}

Program.cs

@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using System;
+using System.Collections.Generic;
+using System.Net.Http;
+using System.Text;
+using System.Threading.Tasks;
+using Syncfusion.Blazor;
+namespace MyBlazorProject
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add<App>("app");
+ builder.Services.AddSyncfusionBlazor();
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+ await builder.Build().RunAsync();
+ }
+ }
+}

Properties/launchSettings.json

@@ -0,0 +1,29 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:11711",
+ "sslPort": 44316
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "MyBlazorProject": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+ "applicationUrl": "https://localhost:5001;http://localhost:5000",
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ }
+ }
+}

README.md

@@ -1,2 +1,13 @@
-# column-customization-in-blazor-treegrid
-A quick-start Blazor project that helps you to customize column headers and data in the Blazor TreeGrid component using template option.
+# Column Customization in Blazor TreeGrid
+A quick-start Blazor project that helps you to customize column headers and data in the Blazor TreeGrid component using template option.
+
+Documentation: https://blazor.syncfusion.com/demos/tree-grid/column-template?theme=bootstrap4
+
+Online examples: https://blazor.syncfusion.com/demos/tree-grid/header-template?theme=bootstrap4
+
+## Project prerequisites
+Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK 3.1.3 or later version in your machine before starting to work on this project.
+
+## How to run this application
+To run this application, you need to first clone the `column-customization-in-blazor-treegrid` repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.
+

Shared/MainLayout.razor

@@ -0,0 +1,11 @@
+@inherits LayoutComponentBase
+
+<div class="sidebar">
+ <NavMenu />
+</div>
+
+<div class="main">
+ <div class="content px-4">
+ @Body
+ </div>
+</div>

Shared/NavMenu.razor

@@ -0,0 +1,27 @@
+<div class="top-row pl-4 navbar navbar-dark">
+ <a class="navbar-brand" href="">MyBlazorProject</a>
+ <button class="navbar-toggler" @onclick="ToggleNavMenu">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+ <ul class="nav flex-column">
+ <li class="nav-item px-3">
+ <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+ <span class="oi oi-home" aria-hidden="true"></span> Home
+ </NavLink>
+ </li>
+ </ul>
+</div>
+
+@code {
+ private bool collapseNavMenu = true;
+
+ private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+ private void ToggleNavMenu()
+ {
+ collapseNavMenu = !collapseNavMenu;
+ }
+}

Shared/SurveyPrompt.razor

@@ -0,0 +1,16 @@
+<div class="alert alert-secondary mt-4" role="alert">
+ <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
+ <strong>@Title</strong>
+
+ <span class="text-nowrap">
+ Please take our
+ <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
+ </span>
+ and tell us what you think.
+</div>
+
+@code {
+ // Demonstrates how a parent component can supply parameters
+ [Parameter]
+ public string Title { get; set; }
+}