ASP .NET Core MVC Documentation

Getting Started

jqxTree represents a UI component which displays a hierarchy of items.

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

jqxTree requires the following files:

  • CSS

  • jqx.base.css

  • Javascript

  • jqxcore.js
  • jqxbuttons.js
  • jqxscrollbar.js
  • jqxlistbox.js
  • jqxTree.js
The next step is to create html element within the body of the html document and add the initialization attributes. 
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Tree Example";
}
<jqx-tree  items-member="Items" display-member="Label" source="Model"></jqx-tree>
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/jqxtree.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Tree Example";
}
<jqx-tree  items-member="Items" display-member="Label" source="Model"></jqx-tree>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["addBefore"]('item',1);									
	}									
</script>									
}
To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event. 
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Tree Example";
}
<jqx-tree  items-member="Items" display-member="Label" source="Model"></jqx-tree>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Basic Sample