ASP.NET MVC
Demos
Support
Forum
Download
Search results

Getting Started with ASP.NET MVC

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET MVC application to use our components.

Prerequisites

To get start with ASP.NET MVC application, need to ensure the following software to be installed on the machine.

  1. .Net Framework 4.5 and above.
  2. ASP.NET MVC 4 or ASP.NET MVC 5
  3. Visual Studio

Create ASP.NET MVC application

Create ASP.NET MVC Application with default template project in Visual Studio 2017.

Default Template

Adding Syncfusion package

Once your project created, we need to add Syncfusion EJ2 package into your application by using NuGet Package Manager.

Open the NuGet package manager.

Solution Explorer

Install the Syncfusion.EJ2.MVC4 package to the application.

Nuget Demo

After Installation completed the Syncfusion DLL’s will be included in the project.

You need to install NewtonSoft.JSON as dependency since Syncfusion.EJ2.AspNet.Core dependent to NewtonSoft.JSON package.

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Adding Scripts and CSS reference

You can add client side resource through Nuget package manager or CDN in the layout page Views/Shared/_Layout.cshtml.

Nuget Package Manager:

Install the Syncfusion.EJ2.Javascript package to the application.

Nuget Demo

After Installation completed the script and CSS will be included in the project under the Scripts and Content folder.

<head>
@* Syncfusion Essential JS 2 Styles *@
<link href="~/Content/ej2/material.css" rel="stylesheet" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="~/Scripts/ej2/ej2.min.js"></script>
</head>

Syncfusion.EJ2.Javascript includes typescript declaration files. If your application is not configured to compile typescript then exception may occur. To resolve this please refer here.

CDN Link:

<head>
@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>

Adding ScriptManager in layout page

Add ScriptManager to the bottom of the _Layout.cshtml page. The ScriptManager used to place our control initialization script in the page.

@Html.EJS().ScriptManager()

Add TreeGrid Component

To initialize the TreeGrid component add the below code to your Index.cshtml view page which is present under Views/Home folder.

razor
@Html.EJS().TreeGrid("TreeGrid").Render()

Defining Row Data

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

razor
data.cs
@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).ChildMapping("Children").TreeColumnIndex(1).Render()
public ActionResult Index()
{
    var Order = TreeData.GetDefaultData();
    ViewBag.DataSource = Order;
    return View();
}

ChildMapping specifies the mapping property path for subtasks in dataSource. TreeColumnIndex specifies the index of the column that needs to have the expander button.

Defining Columns

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

The TreeGrid has an option to define columns using Columns property. In Column property you have properties to customize columns.

Let’s check the properties used here:

  • The Field property is to map with a property name an array of JavaScript objects.
  • The HeaderText property is to change the title of columns.
  • The TextAlign property is to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, you need to define textAlign as Right.
  • Using Format property you can format number and date values to standard or custom formats. Here, you have defined it for the conversion of numeric values to currency.
razor
columns.cs
@Html.EJS().TreeGrid("Pager").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).Render()
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

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. Pager can be customized using 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 PageSizeMode property of PageSettings.

razor
page.cs
@Html.EJS().TreeGrid("Pager").AllowPaging().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()
public IActionResult Index()
{
    var Order = TreeGridItems.GetTreeData();
    ViewBag.DataSource = Order;
    return View();
}

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

razor
sorting.cs
@Html.EJS().TreeGrid("Pager").AllowPaging().AllowSorting().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()
public IActionResult Index()
{
    var Order = TreeDataFormat.GetDataFormat();
    ViewBag.DataSource = Order;
    return View();
}

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

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

razor
filtering.cs
@Html.EJS().TreeGrid("Pager").AllowPaging().AllowSorting().AllowFiltering().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("TaskId").HeaderText("Task ID").Width(70).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("TaskName").HeaderText("Task Name").Width(160).Add();
   col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).ChildMapping("Children").TreeColumnIndex(1).PageSettings(page => page.PageSizes(true).PageCount(2)).Render()
public IActionResult Index()
{
    var Order = TreeGridItems.GetTreeData();
    ViewBag.DataSource = Order;
    return View();
}

Output be like the below.

TreeGrid Sample Demo

Previous
Next