MVVM - Treeview only updates on dataTextField change

[Scott]

I have a treeview using a template for the nodes (see below).  Also have a form bound to the selected item in the treeview.  "Name" is speciified as the dataTextField.  My problem is the treeview is only updated when the Name field is changed.  It ignores changes to the Color field.  Is there some way to setup the template so that the nodes will change based on any of the referenced fields changing?

<script id="treeViewTemplate" type="text/x-kendo-tmpl">
    <span style="background-color:#: item.Color #">&nbsp;&nbsp;&nbsp;</span>
    #: item.Name #
</script>

[Petur Subev]

Hello Scott,

Indeed I was able to reproduce your case with the following code:

              <div id="treeview-left"></div>


          <script>
              var inlineDefault = new kendo.data.HierarchicalDataSource({
                  data: [
                    { text: "Furniture", someOtherField: "foo", items: [
                          { text: "Tables & Chairs" },
                          { text: "Sofas", someOtherField: "bar" },
                          { text: "Occasional Furniture" }
                      ]
                    },
                      { text: "Decor", items: [
                          { text: "Bed Linen" },
                          { text: "Curtains & Blinds" },
                          { text: "Carpets" }
                      ]
                      }
                  ]
              });

              var tv = $("#treeview-left").kendoTreeView({
                  dataSource: inlineDefault,
                  template: "-> #= item.text# #= item.someOtherField || '' #"
              }).data('kendoTreeView');
              debugger;
              tv.dataSource.at(0).set('someOtherField', 'CHANGED!');
              tv.dataSource.at(0).trigger('change');
</script>

Without adding the last line. I will inform the Dev team about this. As a work-around you can force the change when triggering the change manually like shown above.

Kind Regards,
Petur Subev
Telerik

[Rahul]

Hi Petur Subev,
I want to set the tree view node color based the value defined in the data source, I am not using MVVM way as Scott mentioned, will you please help me?

I created jsfiddle here,

http://jsfiddle.net/KendoDev/qZeK6/

[Petur Subev]

Hello Rahul,

Please open separate ticket/thread for question not related to the original one. Before doing so please check the template property:

http://demos.telerik.com/kendo-ui/treeview/templates

Kind Regards,
Petur Subev
Telerik

 

 

[Ryan]

This bug does not appear to be fixed in the latest kendoui (2014.2.903).

It means that data binding and templates cannot be used together for treeview items. Only the text field appears to support updating.

Am I missing something?

[Ryan]

I forgot to add that the workaround

        tv.dataSource.at(0).trigger('change');

seems to cause a weird thing where the other nodes after the first disappear from the tree when triggering that change event.

Thanks for any insight you have.

[Alex Gyoshev]

Hello Ryan,

In order to update items when their dataItem is changed, you need to use the getters and setters provided by the Kendo UI ObservableObject. See this Dojo snippet for a sample.

Regards,
Alex Gyoshev
Telerik

 

 

[Ryan]

Hi Alex,

Thank you. That explains it, and it works great. However, I am also trying to bind the checkbox checked state using the same method, and it doesn't seem to work for updating (it works for the initial state). See dojo here: http://dojo.telerik.com/eMoPi/3

The line:

tree.dataSource.get(3).set("isSelected", true)

has no effect. 

Is there something I'm doing wrong?

Thanks!

[Alex Gyoshev]

Hello Ryan,

I'm afraid that the checked state must be stored in the checked field, and changing the name is not supported, as the TreeView relies internally on that name. This is also the reason the checkChildren functionality does not work.

Regards,
Alex Gyoshev
Telerik

 

 

[Ryan]

Hi Alex,

You are right. Keeping the field named "checked" works. Thanks! Working snippet here: http://dojo.telerik.com/ARake/2