Currently, I am utilizing the treeview and HierarchicalDataSource features of KendoUI. Additionally, I have included a kendoDropDownList at the top of the page. Each time a user changes the value of the dropdown list, it triggers the 'change' event, causing the HierarchicalDataSource to be read again. However, it seems that the dropdown change event is not functioning as I had anticipated. I have not made a call to HierarchicalDataSource.read(). Any thoughts on what I might be doing wrong?
Dropdownlist
$("#dropdown").kendoDropDownList({
dataTextField: "functionName",
dataValueField: "hrsPositionID",
dataSource: {
transport:{
read: {
url: "./getDropdown.php",
type: "POST",
data: function() {
return {
method: "getDropdown",
}
}
},
},
},
change: function(e){
console.log(this.value());
$('#AccountingTree').data('kendoTreeView').HierarchicalDataSource.read(); //<-- not working
}
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");
HierarchicalDataSource & kendoTreeView
var serviceRoot = "./getyzdTreeView.php";
dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json",
type: "POST",
data: function(){
return {
positionID: dropdownlist.value() //read the value from dropdownlist
}
}
}
},
schema: {
model: {
id : "programID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Accounting" }
});
$("#AccountingTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true } ,
dataSource: dataSource,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","programName","checked"]
});