ASP .NET Core MVC Documentation
Getting Started
jqxTreeGrid represents a UI component which displays a data hierarchy.Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
jqxTreeGrid requires the following files:
CSS
jqx.base.css
Javascript
jqxcore.js
jqxdata.js
jqxdata.export.js
jqxbuttons.js
jqxscrollbar.js
jqxlistbox.js
jqxdropdownlist.js
jqxdatatable.js
jqxtreegrid.js
To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}@{var employee = Model.FirstOrDefault();var editSettings = '{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }';var exportSettings = '{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}';}<script>var treeGridInstance;function getInstance(instance){treeGridInstance = instance;}function treeGridReady(){treeGridInstance.expandRow(2);}</script><jqx-tree-grid alt-rows="true" key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" width="850" source="Model"><jqx-tree-grid-columns><jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column></jqx-tree-grid-columns></jqx-tree-grid>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}@{var employee = Model.FirstOrDefault();var editSettings = '{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }';var exportSettings = '{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}';}<script>var treeGridInstance;function getInstance(instance){treeGridInstance = instance;}function treeGridReady(){treeGridInstance.expandRow(2);}</script><jqx-tree-grid key-datafield-for="@(employee.EmployeeID)" ready="treeGridReady()" source-id-for="@(employee.EmployeeID)" instance="getInstance()" parent-datafield-for="@(employee.ManagerID)" width="850" source="Model"><jqx-tree-grid-columns><jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column></jqx-tree-grid-columns></jqx-tree-grid>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["addRow"](10,{},'first');}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>
<script src="~/jqwidgets/jqxdatatable.js"></script>
<script src="~/jqwidgets/jqxtreegrid.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeGrid Example";
}@{var employee = Model.FirstOrDefault();var editSettings = '{ saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }';var exportSettings = '{columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, collapsedRecords: false, recordsInView: true,fileName: \"jqxTreeGrid\"}';}<script>var treeGridInstance;function getInstance(instance){treeGridInstance = instance;}function treeGridReady(){treeGridInstance.expandRow(2);}</script><jqx-tree-grid on-binding-complete="eventHandler()"><jqx-tree-grid-columns><jqx-tree-grid-column dataField-for="@(employee.FirstName)" width="100" text="First Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.LastName)" width="100" text="Last Name"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Title)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Address)" width="200"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.City)" width="150"></jqx-tree-grid-column><jqx-tree-grid-column datafield-for="@(employee.Country)"></jqx-tree-grid-column></jqx-tree-grid-columns></jqx-tree-grid>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}