Here is my tree view of KendoUI
:
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var regions = {
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllRegions?countryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
},
},
schema: {
model: {
hasChildren: function () {
return false;
}
}
}
};
var countries = {
type: "odata",
schema: {
model: {
id: "Id",
hasChildren: "HasChildren",
children: regions
}
},
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllCountries?territoryID=?" + options.ID,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
}
};
var Territories = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: function (options) {
$.ajax(
{
type: "POST",
url: "Territory/AllTerritories",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$("#treeview").data("kendoTreeView").dataSource.data(data);
}
});
}
},
schema: {
model: {
hasChildren: "HasChildren",
Id: "ID",
children: countries
}
}
});
$("#treeview").kendoTreeView({
dataSource: Territories,
dataTextField: ["Name", "Name", "Name"],
dataValueField:"ID"
});
});
</script>
The hierarchy is Territories->countries->regions
I can see the territories populating, but I am unable to fetch the ID
property of selected Territory so that countries can be populated, that is in ajax call,
options.ID
is undefined there.