This is a migrated thread and some comments may be shown as answers.

Binding to nested array values in TreeView

8 Answers 237 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
jason
Top achievements
Rank 1
jason asked on 25 Feb 2014, 05:05 PM
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

8 Answers, 1 is accepted

Sort by
0
jason
Top achievements
Rank 1
answered on 25 Feb 2014, 05:11 PM
I just realized my jsfiddle link didn't link: http://jsfiddle.net/jsonsee/M8peq/3/
0
jason
Top achievements
Rank 1
answered on 25 Feb 2014, 05:13 PM
0
jason
Top achievements
Rank 1
answered on 25 Feb 2014, 10:28 PM
Updating JSFiddle to show output and that the bindings are not working after I add the first node.

http://jsfiddle.net/jsonsee/9B9pT/
0
jason
Top achievements
Rank 1
answered on 25 Feb 2014, 10:31 PM
0
Alex Gyoshev
Telerik team
answered on 27 Feb 2014, 10:04 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jason
Top achievements
Rank 1
answered on 27 Feb 2014, 05:05 PM
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.






0
Alex Gyoshev
Telerik team
answered on 03 Mar 2014, 10:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jason
Top achievements
Rank 1
answered on 03 Mar 2014, 02:46 PM
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
Tags
TreeView
Asked by
jason
Top achievements
Rank 1
Answers by
jason
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or