ASP .NET MVC TreeGrid Tag Helper

The TreeGrid tag helper shares the same API members as the Javascript DataTable widget i.e all properties, methods and events can be used. Additional properties for the jqx-datatable tag helper are:

• create - {{String}} which determines the URL called when a TreeGrid row is added.
• datafield-for - {{ModelExpression}} used for model binding and determines the column's bound member.
• delete - {{String}} which determines the URL called when a TreeGrid row is deleted.
• edit - {{String}} which determines the URL called when the TreeGrid is edited.
• instance - {{String}} which determines the javascript member within the Script tag which refers to the TreeGrid's instance. This member is useful when you want to dynamically invoke API members of the Javascript component.
• serverProcessing - {{Boolean}} which determines whether server processing is enabled.
• sourceId - {{String}} which determines the data source's ID member.
• sourceId-for - {{ModelExpression}} used for model binding and determines the data source's ID member.
• sourceRoot - {{String}} which determines the data source's Root member.
• sourceTotalRecords - {{Integer}} which determines the data source's TotalRecords member.
• sourceUrl - {{String}} which determines the data source's URL.
• sourceModel - {{Model}} which determines the data source's Model.

jqx-treegrid-columns tag helper should be defined within the jqx-treegrid tag helper and defines the TreeGrid columns collection. jqx-treegrid-column tag helper should be defined within the jqx-treegrid-columns tag helper and defines a TreeGrid column. jqx-treegrid-column-groups tag helper should be defined within the jqx-treegrid tag helper and defines the TreeGrid columns hierarchy. jqx-treegrid-column-group tag helper should be defined within the jqx-treegrid-column-groups tag helper and defines a TreeGrid column group.

@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var treeGridInstance;
    function getInstance(instance)
    {
        treeGridInstance = instance;
    }
    function treeGridReady()
    {
        treeGridInstance.expandRow(2);
    }
</script>
<label>ASP .NET Core MVC Tree Grid Example</label><br/><br/>
<jqx-treegrid keyDataField-for="@(employee.EmployeeID)" ready="treeGridReady()" sourceId-for="@(employee.EmployeeID)" instance="getInstance()" parentDataField-for="@(employee.ManagerID)" theme="@ViewData["Theme"]" sortable="true" width="850" source="Model"> 
    <jqx-treegrid-columns>
        <jqx-treegrid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-treegrid-column>
        <jqx-treegrid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-treegrid-column>
        <jqx-treegrid-column datafield-for="@(employee.Title)" width="150"></jqx-treegrid-column>
        <jqx-treegrid-column datafield-for="@(employee.Address)" width="200"></jqx-treegrid-column>
        <jqx-treegrid-column datafield-for="@(employee.City)" width="150"></jqx-treegrid-column>
        <jqx-treegrid-column datafield-for="@(employee.Country)"></jqx-treegrid-column>
    </jqx-treegrid-columns>
</jqx-treegrid>