ASP .NET Core MVC Documentation

Sets or gets the altRows property.

<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>

Sets or gets the autoRowHeight property.

<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 auto-row-height="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>

Sets or gets the aggregatesHeight property.

<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 aggregates-height="40" 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>

Sets or gets the autoShowLoadElement property.

<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 auto-show-load-element="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>

Sets or gets the checkboxes property.

<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 checkboxes="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>

Sets or gets the columnsHeight property.

<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 columns-height="40" 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>

Sets or gets the columns property.

<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 columns="columns" 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>

Sets or gets the columnGroups property.

<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 {{configuration}} 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 column-group="name" dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column column-group="name" 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-column-groups>
        <jqx-tree-column-group name="name" text="Name"></jqx-tree-grid-column-group>
    </jqx-tree-grid-column-groups>
</jqx-tree-grid>

Sets or gets the columnsResize property.

<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 columns-resize="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>

Sets or gets the columnsReorder property.

<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 columns-reorder="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>

Sets or gets the disabled property.

<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 disabled="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>

Sets or gets the editable property.

<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 editable="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>

Sets or gets the editSettings property.

<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 edit-settings="editSettings" 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>

Sets or gets the exportSettings property.

<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 export-settings="exportSettings" 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>

Sets or gets the enableHover property.

<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 enable-hover="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>

Sets or gets the enableBrowserSelection property.

<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 enable-browser-selection="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>

Sets or gets the filterable property.

<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 filterable="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>

Sets or gets the filterHeight property.

<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 filterable="true" filter-height="40" 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>

Sets or gets the filterMode property.

<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 filterable="true" filter-mode="advanced" 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>

Sets or gets the height property.

<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 height="200" 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>

Sets or gets the hierarchicalCheckboxes property.

<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 checkboxes="true" hierarchical-checkboxes="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>

Sets or gets the icons property.

<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 icons="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>

Sets or gets the incrementalSearch property.

<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 incremental-search="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>

Sets or gets the localization property.

<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 Localization Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var treeGridInstance;
    function getInstance(instance)
    {
        treeGridInstance = instance;
    }
    function treeGridReady()
    {
        treeGridInstance.expandRow(2);
    }
    var localization = function () {
        var localizationobj = {};
        localizationobj.pagerGoToPageString = "Gehe zu:";
        localizationobj.pagerShowRowsString = "Zeige Zeile:";
        localizationobj.pagerRangeString = " von ";
        localizationobj.pagerNextButtonString = "voriger";
        localizationobj.pagerFirstButtonString = "erste";
        localizationobj.pagerLastButtonString = "letzte";
        localizationobj.pagerPreviousButtonString = "n�chster";
        localizationobj.sortAscendingString = "Sortiere aufsteigend";
        localizationobj.sortDescendingString = "Sortiere absteigend";
        localizationobj.sortRemoveString = "Entferne Sortierung";
        localizationobj.emptydatastring = "keine Daten angezeigt";
        localizationobj.firstDay = 1;
        localizationobj.percentSymbol = "%";
        localizationobj.currencySymbol = "�";
        localizationobj.currencySymbolPosition = "after";
        localizationobj.decimalSeparator = ".";
        localizationobj.thousandsSeparator = ",";
        var days = {
            // full day names
            names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
            // abbreviated day names
            namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
            // shortest day names
            namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
        };
        localizationobj.days = days;
        var months = {
            // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
            names: ["Januar", "Februar", "M�rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
            // abbreviated month names
            namesAbbr: ["Jan", "Feb", "M�r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
        };
        var patterns = {
            d: "dd.MM.yyyy",
            D: "dddd, d. MMMM yyyy",
            t: "HH:mm",
            T: "HH:mm:ss",
            f: "dddd, d. MMMM yyyy HH:mm",
            F: "dddd, d. MMMM yyyy HH:mm:ss",
            M: "dd MMMM",
            Y: "MMMM yyyy"
        }
        localizationobj.patterns = patterns;
        localizationobj.months = months;
        return localizationobj;
    }();
</script>
<jqx-tree-grid localization='{{localization}}' sortable=true pageable=true pager-mode="advanced" key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" theme="@ViewData["Theme"]'  width="850" source="Model"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="Vorname"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.LastName)" width="100" text="Familienname"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.Title)" text="Titel" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.Address)" text="Adresse" width="200"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.City)" text="Stadt" width="150"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.Country)" text="Land"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>

Sets or gets the pagerHeight property.

<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 pageable="true" pager-height="35" 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>

Sets or gets the pageSize property.

<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 pageable="true" page-size="5" 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>

Sets or gets the pageSizeOptions property.

<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 pageable="true" page-size-options='['2', '3', '5']' 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>

Sets or gets the pageable property.

<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 pageable="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>

Sets or gets the pagerPosition property.

<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 pageable="true" pager-position="top" 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>

Sets or gets the pagerMode property.

<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 pageable="true" pager-mode="advanced" 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>

Sets or gets the pageSizeMode property.

<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 pageable="true" page-size-mode="root" 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>

Sets or gets the pagerButtonsCount property.

<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 pageable="true" pager-buttons-count="2" 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>

Sets or gets the pagerRenderer property.

<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 pageable="true" pager-renderer="pagerRenderer" 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>

Sets or gets the ready property.

<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 ready="treeGridReady()" key-datafield-for="@(employee.EmployeeID)" 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>

Sets or gets the rowDetails property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxmenu.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var initRowDetails = function (id, record, element, rowinfo) {
        var id = id.toString();
        
       
    }
</script>
<jqx-tree-grid row-details="true" pageable="true" init-row-details="initRowDetails()" 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>

Sets or gets the rowDetailsRenderer property.

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxmenu.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    var employee = Model.FirstOrDefault();
}
<script>
    var initRowDetails = function (id, record, element, rowinfo) {
        var id = id.toString();
        
       
    }
</script>
<jqx-tree-grid row-details="true" pageable="true" init-row-details="initRowDetails()" 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>

Sets or gets the renderToolbar property.

<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 render-toolbar="renderToolbar" 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>

Sets or gets the renderStatusbar property.

<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 render-statusbar="renderStatusbar" 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>

Sets or gets the rendering property.

<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 rendering="rendering" 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>

Sets or gets the rendered property.

<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 rendered="rendered" 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>

Sets or gets the rtl property.

<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 rtl="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>

Sets or gets the source property.

<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 source="Model" key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" width="850"> 
    <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>

Sets or gets the sortable property.

<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 sortable="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>

Sets or gets the showAggregates property.

<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 show-aggregates="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>

Sets or gets the showSubAggregates property.

<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 show-aggregates="true" show-sub-aggregates="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>

Sets or gets the showToolbar property.

<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 show-toolbar="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>

Sets or gets the showStatusbar property.

<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 show-statusbar="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>

Sets or gets the statusBarHeight property.

<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 status-bar-height="40" 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>

Sets or gets the scrollBarSize property.

<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 scroll-bar-size="15" 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>

Sets or gets the selectionMode property.

<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 selection-mode="singleRow" 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>

Sets or gets the showHeader property.

<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 show-header="false" 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>

Sets or gets the theme property.

<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 theme="energyblue" 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>

Sets or gets the toolbarHeight property.

<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 toolbar-height="40" 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>

Sets or gets the width property.

<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 width="850" key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" 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>

Sets or gets the virtualModeCreateRecords property.

<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.SalesEmployee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    function virtualModeCreateRecords(expandedRecord, done)
    {
        var json = expandedRecord ? JSON.stringify(expandedRecord) : '{ReportsTo: null}';
        var source =
            {
                type: 'POST', dataType: 'json',
                dataFields:
                    [
                        { name: "FirstName", type: "string" },
                        { name: "LastName", type: "string" },
                        { name: "ProductName", type: "string" },
                        { name: "ID", type: "string" },
                        { name: "ReportsTo", type: "string" }
                    ],
                data: { 'jsonData': json },
                root: "Employees",
                id: "ID",
                url: "@Url.Action("GetChildren","TagHelpers")"
                };
        var dataAdapter = new $.jqx.dataAdapter(source,
        {
            loadComplete: function () {
                done(dataAdapter.records);
            },
            loadError: function (xhr, status, error) {
                done(false);
            }
        });
        dataAdapter.dataBind();
    }
    function virtualModeRecordCreating(record)
    {
        if (record.level == 1) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    }
</script>
<jqx-tree-grid pageable="true" virtual-mode-create-records="virtualModeCreateRecords()" virtual-mode-record-creating="virtualModeRecordCreating()" width="600"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="200" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.LastName)" width="200" text="Last Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.ProductName)" width="200"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>

Sets or gets the virtualModeRecordCreating property.

<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.SalesEmployee>
@{
    ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}
@{
    var employee = Model.FirstOrDefault();
}
<script>
    function virtualModeCreateRecords(expandedRecord, done)
    {
        var json = expandedRecord ? JSON.stringify(expandedRecord) : '{ReportsTo: null}';
        var source =
            {
                type: 'POST', dataType: 'json',
                dataFields:
                    [
                        { name: "FirstName", type: "string" },
                        { name: "LastName", type: "string" },
                        { name: "ProductName", type: "string" },
                        { name: "ID", type: "string" },
                        { name: "ReportsTo", type: "string" }
                    ],
                data: { 'jsonData': json },
                root: "Employees",
                id: "ID",
                url: "@Url.Action("GetChildren","TagHelpers")"
                };
        var dataAdapter = new $.jqx.dataAdapter(source,
        {
            loadComplete: function () {
                done(dataAdapter.records);
            },
            loadError: function (xhr, status, error) {
                done(false);
            }
        });
        dataAdapter.dataBind();
    }
    function virtualModeRecordCreating(record)
    {
        if (record.level == 1) {
            // by setting the record's leaf member to true, you will define the record as a leaf node.
            record.leaf = true;
        }
    }
</script>
<jqx-tree-grid pageable="true" virtual-mode-create-records="virtualModeCreateRecords()" virtual-mode-record-creating="virtualModeRecordCreating()" width="600"> 
    <jqx-tree-grid-columns>
        <jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="200" text="First Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.LastName)" width="200" text="Last Name"></jqx-tree-grid-column>
        <jqx-tree-grid-column dataField-for="@(employee.ProductName)" width="200"></jqx-tree-grid-column>
    </jqx-tree-grid-columns>
</jqx-tree-grid>

Code examples

Bind to the bindingComplete event of jqxTreeGrid.

<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>									
}

Code examples

Bind to the cellBeginEdit event of jqxTreeGrid.

<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-cell-begin-edit="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>									
}

Code examples

Bind to the cellEndEdit event of jqxTreeGrid.

<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-cell-end-edit="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>									
}

Code examples

Bind to the cellValueChanged event of jqxTreeGrid.

<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-cell-value-changed="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>									
}

Code examples

Bind to the columnResized event of jqxTreeGrid.

<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-column-resized="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>									
}

Code examples

Bind to the columnReordered event of jqxTreeGrid.

<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-column-reordered="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>									
}

Code examples

Bind to the filter event of jqxTreeGrid.

<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-filter="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>									
}

Code examples

Bind to the pageChanged event of jqxTreeGrid.

<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-page-changed="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>									
}

Code examples

Bind to the pageSizeChanged event of jqxTreeGrid.

<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-page-size-changed="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>									
}

Code examples

Bind to the rowClick event of jqxTreeGrid.

<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-row-click="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>									
}

Code examples

Bind to the rowDoubleClick event of jqxTreeGrid.

<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-row-double-click="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>									
}

Code examples

Bind to the rowSelect event of jqxTreeGrid.

<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-row-select="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>									
}