Binding to nested array values in TreeView

[jason]

We are evaluating KendoUI web for use in all of our projects and I am running into an issue (or lack of understanding) with the TreeView Widget.

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?

Thanks,

Jason

[jason]

I just realized my jsfiddle link didn't link: http://jsfiddle.net/jsonsee/M8peq/3/

[jason]

One more try: http://jsfiddle.net/jsonsee/M8peq/3/

[jason]

Updating JSFiddle to show output and that the bindings are not working after I add the first node.

http://jsfiddle.net/jsonsee/9B9pT/

[jason]

http://jsfiddle.net/jsonsee/9B9pT/

[Alex Gyoshev]

Hello Jason,

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,
Alex Gyoshev
Telerik

[jason]

Alex,

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.

Example:

ViewModel:

[
   {
      text: 'item 1',
      items: [
         {
             text: 'child 1',
             otherProperty: 'arbitrary value'
         }
      ]
   }
]

Pseudo TreeView

* 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.

[Alex Gyoshev]

Hello Jason,

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,
Alex Gyoshev
Telerik

[jason]

Thanks Alex.

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!

Jason