I am trying to use a MVVM TreeView and I am having issues when binding to nested array values from my template. I created a JSFiddle example for our use in this discussion: http://jsfiddle.net/jsonsee/M8peq/3/
I am dynamically building the tree view, by adding a node and its children with a button click. I want to bind each leaf(child) node to a text value on that node in the MVVM. This seems to work great on the initial load of the tree, but after adding more nodes to the viewModel, the bindings seem to quit working.
This seems to be a lot harder than I feel it should, which makes me think I am missing something.
Can anyone shed some light on this?
8 Answers, 1 is accepted
Can you please describe the exact steps to reproduce the issue, along with the expected / actual outcome? Also, please verify that the problem persists in the latest Kendo UI version -- the provided fiddle uses the Q1 release, which is almost a year old.Regards,
I apologize for not being clear on what I was trying to accomplish. Basically, I want to render a bound text box for each leaf node that is two-way bound to a property on the leaf node viewModel object.
* Item 1
---------* child 1 <textbox data-bind="value: otherPropertyOnChild1"/>
---------* child 2 <textbox data-bind="value: otherPropertyOnChild2"/>
---------* child 3 <textbox data-bind="value: otherPropertyOnChild3"/>
* Item 2
---------* child 4 <textbox data-bind="value: otherPropertyOnChild4"/>
---------* child 5 <textbox data-bind="value: otherPropertyOnChild5"/>
---------* child 6 <textbox data-bind="value: otherPropertyOnChild6"/>
* Item 3
---------* child 7 <textbox data-bind="value: otherPropertyOnChild7"/>
---------* child 8 <textbox data-bind="value: otherPropertyOnChild8"/>
---------* child 9 <textbox data-bind="value: otherPropertyOnChild9"/>
If you can give me cdn links to the latest kendo I will update the fiddle.
Also, I can accomplish what I want using normal templates binding directly to the view model without the treeView. I am just curious now why it doesn't work with the treeView. Using normal template binding and html with the viewmodel, it seems that the context of the binding from the template is per item, its almost as if the binding is lost when the treeView renders each node.
Two-way databinding of items is not supported at this time, and placing input elements in treeview templates is not generally well supported or intended due to the TreeView behavior. A better way to achieve editing of treeview items is to place editing buttons in each node, as shown in the templates online demo. Then have the buttons open an editing form, which can be MVVM-bound.Regards,
I solved the problem by just removing the tree view all together and used nested templates. It seems to work well, but the edit form is a good idea and may be a better interface choice. Thanks for the advice!