Getting Started

jqxTreeGrid represents a UI component which displays a data hierarchy.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxTreeGrid requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxdata.js
• jqxdata.export.js
• jqxbuttons.js
• jqxscrollbar.js
• jqxlistbox.js
• jqxdropdownlist.js
• jqxdatatable.js
• jqxtreegrid.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
	var editSettings = "{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }";
	var exportSettings = "{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}";
}
<script>
    var treeGridInstance;
    function getInstance(instance)
    {
        treeGridInstance = instance;
    }
    function treeGridReady()
    {
        treeGridInstance.expandRow(2);
    }
</script>
<jqx-tree-grid alt-rows="true" key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" width="850" source="Model"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>

To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
	var editSettings = "{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }";
	var exportSettings = "{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}";
}
<script>
    var treeGridInstance;
    function getInstance(instance)
    {
        treeGridInstance = instance;
    }
    function treeGridReady()
    {
        treeGridInstance.expandRow(2);
    }
</script>
<jqx-tree-grid key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" width="850" source="Model"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["addRow"](10,{},'first');									
	}									
</script>									
}

To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
	var editSettings = "{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }";
	var exportSettings = "{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}";
}
<script>
    var treeGridInstance;
    function getInstance(instance)
    {
        treeGridInstance = instance;
    }
    function treeGridReady()
    {
        treeGridInstance.expandRow(2);
    }
</script>
<jqx-tree-grid on-binding-complete="eventHandler()"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Basic Sample