Data Binding in Dropdown Tree Component
5 Dec 202224 minutes to read
The Dropdown Tree control provides an option to load the data either from local data sources or from remote data services. This can be done through dataSource property that is a member of the fields property. The dataSource property supports list of data and DataManager. It also supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of DataManager adaptors.
Dropdown Tree has load on demand (Lazy load) option. It reduces the bandwidth size while consuming the huge data. By default, the loadOnDemand is set to false. By enabling this property, it loads first level items initially, and when parent item is expanded, it loads the child items based on the parentValue/child member.
Local data
To bind local data to the Dropdown Tree, you can assign a list of data to the dataSource property.
The Dropdown Tree control requires three fields (Value, text, and parentValue) to render local data source. When mapper fields are not specified, it takes the default values as the mapping fields. Local data source can also be provided as an instance of the DataManager. It supports two kinds of local data binding methods.
-
Hierarchical data
-
Self-referential data
Hierarchical data
Dropdown Tree can be populated with the hierarchical data source that contains nested list of data. You can directly map the hierarchical data and the field members with corresponding key values from the hierarchical data to the fields property.
In the following example, code, name, and countries columns from hierarchical data have been mapped to value, text, and child fields, respectively.
<div id='container' style="margin:0 auto; width:250px;">
<ejs-dropdowntree id="treedata">
<e-dropdowntree-fields dataSource="ViewBag.data" child="ViewBag.child" value="code" text="name"></e-dropdowntree-fields>
</ejs-dropdowntree>
</div>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;
namespace DropDownTree.Controllers
{
public class DropDownListController : Controller
{
public IActionResult HierarchicalData()
{
List<Continents> continents = new List<Continents>();
List<Countries> countries = new List<Countries>();
continents.Add(new Continents
{
code = "NA",
name = "North America",
expanded = true,
child = countries,
});
countries.Add(new Countries { code = "USA", name = "United States of America", selected = true });
countries.Add(new Countries { code = "CUB", name = "Cuba" });
countries.Add(new Countries { code = "MEX", name = "Mexico" });
List<Countries> countries2 = new List<Countries>();
continents.Add(new Continents
{
code = "AF",
name = "Africa",
child = countries2,
});
countries2.Add(new Countries { code = "NGA", name = "Nygeria" });
countries2.Add(new Countries { code = "EGY", name = "Egypt" });
countries2.Add(new Countries { code = "ZAF", name = "South Africa" });
List<Countries> countries3 = new List<Countries>();
continents.Add(new Continents
{
code = "AS",
name = "Asia",
child = countries3,
});
countries3.Add(new Countries { code = "CHN", name = "China" });
countries3.Add(new Countries { code = "IND", name = "India" });
countries3.Add(new Countries { code = "JPN", name = "Japan" });
List<Countries> countries4 = new List<Countries>();
continents.Add(new Continents
{
code = "EU",
name = "Europe",
child = countries4,
});
countries4.Add(new Countries { code = "DNK", name = "Denmark" });
countries4.Add(new Countries { code = "FIN", name = "Finland" });
countries4.Add(new Countries { code = "AUT", name = "Austria" });
List<Countries> countries5 = new List<Countries>();
continents.Add(new Continents
{
code = "SA",
name = "South America",
child = countries5,
});
countries5.Add(new Countries { code = "BRA", name = "Brazil" });
countries5.Add(new Countries { code = "COL", name = "Colombia" });
countries5.Add(new Countries { code = "ARG", name = "Argentina" });
List<Countries> countries6 = new List<Countries>();
continents.Add(new Continents
{
code = "OC",
name = "Oceania",
child = countries6,
});
countries6.Add(new Countries { code = "AUS", name = "Australia" });
countries6.Add(new Countries { code = "NZL", name = "Newzealand" });
countries6.Add(new Countries { code = "WSM", name = "Samoa" });
List<Countries> countries7 = new List<Countries>();
continents.Add(new Continents
{
code = "AN",
name = "Antartica",
child = countries7,
});
countries7.Add(new Countries { code = "BVT", name = "Bouvet Island" });
countries7.Add(new Countries { code = "ATF", name = "French Southern Lands" });
char[] value = { 'c', 'h', 'i', 'l', 'd' };
string Child = new string(value);
ViewBag.child = Child;
ViewBag.data = continents;
return View();
}
public class Continents
{
public string code;
public string name;
public bool expanded;
public bool selected;
public List<Countries> child;
}
public class Countries
{
public string code;
public string name;
public bool expanded;
public bool selected;
}
}
}
Self-referential data
Dropdown Tree can be populated from the self-referential data structure that contains array of JSON objects with parentValue mapping.
You can directly assign self-referential data and map all the field members with corresponding key values from self-referential data to the fields property.
To render the root level items, specify the parentValue as null or no need to specify the parentValue in the dataSource.
In the following example, id, pid, hasChild, and name columns from self-referential data have been mapped to value, parentValue, hasChildren, and text fields, respectively.
<div id='container' style="margin:0 auto; width:250px;">
<ejs-dropdowntree id="treedata">
<e-dropdowntree-fields dataSource="ViewBag.dataSource" value="id" parentValue="pid" hasChildren="hasChild" text="name"></e-dropdowntree-fields>
</ejs-dropdowntree>
</div>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;
namespace DropDownTree.Controllers
{
public class DropDownListController : Controller
{
public IActionResult ListData()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
});
treedata.Add(new
{
id = 6,
pid = 5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid = 10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music"
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}
}
}
Remote data
Dropdown Tree can also be populated from a remote data service with the help of the DataManager control and Query property.
It supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of DataManager adaptors.
You can assign service data as an instance of DataManager to the dataSource. To interact with remote data source, you must provide the endpoint url.
The DataManager that acts as an interface between the service endpoint and the Dropdown Tree requires the following information to interact with service endpoint properly.
-
DataManager->url: Defines the service endpoint to fetch data. -
DataManager->adaptor: Defines the adaptor option. By default, ODataAdaptor is used for remote binding.
Adaptor is responsible for processing response and request from/to the service endpoint. The @syncfusion/ej2-data package provides some pre-defined adaptors designed to interact with service endpoints. They are,
-
UrlAdaptor: Used to interact with remote services. This is the base adaptor for all remote based adaptors. -
ODataAdaptor: Used to interact with OData endpoints. -
ODataV4Adaptor: Used to interact with OData V4 endpoints. -
WebApiAdaptor: Used to interact with Web API created under OData standards. -
WebMethodAdaptor: Used to interact with web methods.
In the following example, ODataV4Adaptor is used to fetch data from the remote services. The EmployeeID, FirstName, and EmployeeID columns from the Employees table has been mapped to value, text, and hasChildren fields respectively for first level nodes.
The OrderID, EmployeeID, and ShipName columns from the orders table have been mapped to value, parentValue, and text fields respectively for second level nodes.
<div id='container' style="margin:0 auto; width:250px;">
<ejs-dropdowntree id="tree">
<e-dropdowntree-fields child="ViewBag.child" query="new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)" value="EmployeeID" text="FirstName" hasChildren="EmployeeID">
<e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>
</e-dropdowntree-fields>
</ejs-dropdowntree>
</div>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;
namespace DropDownTree.Controllers
{
public class DropDownListController : Controller
{
public IActionResult RemoteData()
{
DropDownTreeFields childData = new DropDownTreeFields();
childData.Query = "new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)";
childData.Value = "OrderID";
childData.Text = "ShipName";
childData.ParentValue = "EmployeeID";
childData.DataSource = new Syncfusion.EJ2.DataManager
{
Url = "https://services.odata.org/V4/Northwind/Northwind.svc",
Adaptor = "ODataV4Adaptor",
CrossDomain = true
};
ViewBag.child = childData;
return View();
}
}
}
Prevent Node selection
You can prevent the selection of individual tree node by using the Selectable property. The tree node selection is not allowed while disable this property.
The Selectable property is disabled and the selection is prevented for parent nodes in below sample.
<div id='container' style="margin:0 auto; width:250px;">
<ejs-dropdowntree id="treedata">
<e-dropdowntree-fields dataSource="ViewBag.dataSource" value="id" parentValue="pid" hasChildren="hasChild" text="name" selectable="selectable"></e-dropdowntree-fields>
</ejs-dropdowntree>
</div>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DropDownTree.Models;
using Syncfusion.EJ2.DropDowns;
namespace DropDownTree.Controllers
{
public class DropDownListController : Controller
{
public IActionResult ListData()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true,
selectable = false
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
selectable = false
});
treedata.Add(new
{
id = 6,
pid = 5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories",
selectable = false
});
treedata.Add(new
{
id = 11,
pid = 10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums",
selectable = false
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music",
selectable = false
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}
}
}