I am using RP Niemeyer`s kendo-knockout library. I am running kendoTreeView using dataSource in knockout observable.
html:
<div id="main">
<div id="reportGrid" data-bind="kendoTreeView: { dataSource: treeViewDataSource }"> </div>
<button data-bind="click: addItem">Add</button>
</div>>
javascript:
var billingReportViewModel = ko.observable({
treeViewDataSource: ko.observableArray([{text: "Tea" },{ text: "Coffee" }]),
addItem : function () {
this.treeViewDataSource.push({text: "Water"});
alert(this.treeViewDataSource().length);
}
});
ko.applyBindings(billingReportViewModel);
When I click the add button I am adding a new element to the observable array. The item is added but the view is not updated accordingly.
I am following the steps from here:
Kendo-Knockout: use knockout view model with kendo datasource
Am I doing something wrong? Or this functionality is not currently supported? If so, what are my options? I may remove the treeview from the DOM everytime I add/remove/update a node and then recreate it with the new datasource. But I hope the bindings to work or some more flexible solution. Thanks!
jsFiddle:
Update:
I was also able to load the treeView using the reference to the widget like this:
html:
<div data-bind="kendoTreeView: { widget: myWidget}">
</div>
<button data-bind="click: initialize">Initialize</button>
javascript:
var ViewModel = function () {
this.initialize = function () {
var inline = new kendo.data.DataSource({
data: [
{ id: 1, text: "Tea", sprite: "icon-tea" },
{ id: 2, text: "Coffee", sprite: "icon-coffee" }
]
});
var widget = this.myWidget();
widget.setDataSource(inline);
};
//hold the widget
this.myWidget = ko.observable();
};
ko.applyBindings(new ViewModel());
Using this approach I want to add, remove and update items in the treeview. I am thinking something like manipulating the inline
datasource and I hope that the view will update accordingly (something like the idea of observable datasource from my original post above). How can I do that ? Any working example will be great!