The igTree™ control can be configured to run using jQuery or ASP.NET MVC. This topic demonstrates how to setup an igTree control in each of these environments binding to JSON data on the client and a collection of business object on the server.
You need to first read the following topics:
The following steps will demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC.
Following is a preview of the final result where the tree is bound to hierarchical data.
Following is a conceptual overview of the process:
Set a target element.
On your web page, define a target HTML element which serves as the base object for the igTree control and set its ID. This is an optional step for ASP.NET MVC
In HTML:
<div id="JSONTree"></div>
Instantiate the igTree.
In jQuery, you can use the document ready JavaScript event to instantiate the igTree control. In ASP.NET MVC, use the Ignite UI for MVC helper to bind to an IQueryable datasource.
In HTML:
<script type="text/javascript">
$(function () {
$("#JSONTree").igTree({
});
});
</script>
In ASPX:
<%= Html.
Infragistics().
Tree().
Render()
%>
Define the data.
This example binds to a JSON array which is constructed with nested object arrays. There are two different object schemas: one for the product category which has a Label and Products property and the other for the Product with a Name property. You can see the Products property contains the nested data. This structure forms the hierarchy for the igTree control. In ASP.NET MVC, a nested IQueryable object collection is accepted by the Ignite UI for MVC helper. An Entity Data Model and LINQ make it straightforward to provide this structure to the igTree control. For the purpose of the sample, the sample data code appears below to illustrate the structure of data required by the Ignite UI for MVC helper when binding to collections of objects. The ProductCategory class is defined with a Label property and Products property similar to the JSON array. The GetProductNodes method returns the data for the Ignite UI for MVC helper. You can see that the data is passed as the Model for the view.
In HTML:
var data = [
{ Label: 'Food', Products: [
{ Name: 'Tuna Sandwich' },
{ Name: 'Fish' },
{ Name: 'Hamburger' }
]},
{ Label: 'Beverage', Products: [
{ Name: 'Coke' },
{ Name: 'Pepsi' }
]}];
In C#:
public class SamplesController : Controller
{
//This class defines the object to which the nodes are bound
public class ProductCategory
{
private string _label;
private List<Product> _products;
public string Label { get { return _label; } }
public IQueryable<Product> Products
{
get
{
return _products.AsQueryable();
}
}
public ProductCategory(string label, List<Product> products)
{
if (products == null)
products = new List<Product>();
this._products = products;
this._label = label;
}
public ProductCategory() { }
}
public class Product
{
public string Name { get; set; }
public Product(string name)
{
this.Name = name;
}
public Product() { }
}
//This method creates the collection of data for binding
public IQueryable<ProductCategory> GetProductCategories()
{
return new List<ProductCategory>()
{
new ProductCategory("Food",
new List<Product>{
new Product("Tuna Sandwich"),
new Product("Fish"),
new Product("Hamburger")
}),
new ProductCategory("Beverage",
new List<Product>{
new Product("Coke"),
new Product("Pepsi")
})
}.AsQueryable();
}
Set the data source
Use the dataSource option to supply the data to the tree. In ASP.NET MVC, use your Action Method to return the view and the data. Use the DataSource method of the helper to bind to the data passed in as the Model and then call the DataBind() method.
In HTML:
dataSourceType: 'json',
dataSource: data
In ASPX:
DataSource(this.Model).
DataBind()
In C#:
//Send the data with the View
public ActionResult Mvc()
{
return View("mvc", GetProductCategories());
}
(ASP.NET MVC) Call Render().
When instantiating the Ignite UI for MVC Tree, call the Render method last after all other options have been configured. This is the method that renders the HTML and JavaScript necessary to instantiate the igTree on the client
In ASPX:
Render()
In order for the igTree control to determine how each field of the bound data should function in the hierarchy, a binding object must be configured for each type of object that needs to be displayed in the igTree. In this sample, there are two binding objects defined which represent the ProductCategory and Product objects. The binding objects in this sample are configured for displaying text as well as noting which property exposes the child data.
In HTML:
bindings: {
textKey: 'Label',
childDataProperty: 'Products',
bindings: {
textKey: 'Name'
}
}
In ASPX:
Bindings( bindings => {
bindings.
TextKey("Label").
ChildDataProperty("Products").
Bindings( bindings2 => {
bindings2.
TextKey("Name");
});
})
(Optional) Configure the singleBranchExpand option.
In order for the igTree control to operate on pages where the available height for the igTree control may be constrained, the singleBranchExpand option can be set. This option limits the amount of parent nodes that can be expanded to one at any given time. When a node is expanded it will collapse any other nodes on that level.
In HTML:
singleBranchExpand: true,
In ASPX:
SingleBranchExpand(true)
The following table lists the code examples provided below.
| Example | Description |
|---|---|
| Basic jQuery implementation | Shows how to bind to data and set basic options in jQuery |
| Basic ASP.NET MVC implementation | Shows how to bind to data and set basic options using Ignite UI for MVC |
The code below demonstrates how to create and configure the igTree in jQuery.
Note: The different text key values are set on different binding objects to represent the different levels of data.
In HTML:
<script type="text/javascript">
var data = [
{ Label: 'Food', Products: [
{ Name: 'Tuna Sandwich' },
{ Name: 'Fish' },
{ Name: 'Hamburger' }
]
},
{ Label: 'Beverage', Products: [
{ Name: 'Coke' },
{ Name: 'Pepsi' }
]
}];
$(function () {
$("#tree").igTree({
dataSource: data,
singleBranchExpand: true,
bindings: {
textKey: 'Label',
childDataProperty: 'Products',
bindings: {
textKey: 'Name'
}
}
});
});
</script>
The code below demonstrates how to create and configure the Ignite UI for MVC Tree.
Note: The different text key values are set on different binding objects to represent the different levels of data.
In ASPX:
<%= Html.
Infragistics().
Tree().
ID("tree").
DataSource(this.Model).
SingleBranchExpand(true).
Bindings( bindings => {
bindings.
TextKey("Label").
ChildDataProperty("Products").
Bindings( bindings2 => {
bindings2.
TextKey("Name");
});
}).
DataBind().
Render()
%>
In C#:
public class SamplesController : Controller
{
//This class defines the object to which the nodes are bound
public class ProductCategory
{
private string _label;
private List<Product> _products;
public string Label { get { return _label; } }
public IQueryable<Product> Products
{
get
{
return _products.AsQueryable();
}
}
public ProductCategory(string label, List<Product> products)
{
if (products == null)
products = new List<Product>();
this._products = products;
this._label = label;
}
public ProductCategory() { }
}
public class Product
{
public string Name { get; set; }
public Product(string name)
{
this.Name = name;
}
public Product() { }
}
//This method creates the collection of data for binding
public IQueryable<ProductCategory> GetProductCategories()
{
return new List<ProductCategory>()
{
new ProductCategory("Food",
new List<Product>{
new Product("Tuna Sandwich"),
new Product("Fish"),
new Product("Hamburger")
}),
new ProductCategory("Beverage",
new List<Product>{
new Product("Coke"),
new Product("Pepsi")
})
}.AsQueryable();
}
//Send the data along with the View
public ActionResult Mvc()
{
return View("mvc", GetProductCategories());
}
}
Following are some other topics you may find useful.
View on GitHub