MVVM - Treeview only updates on dataTextField change

10 posts, 0 answers
  1. Scott
    Scott avatar
    5 posts
    Member since:
    Jul 2008

    Posted 24 May 2013 Link to this post

    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>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 28 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Rahul
    Rahul avatar
    2 posts
    Member since:
    Apr 2012

    Posted 01 Aug 2014 in reply to Petur Subev Link to this post

    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/
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 03 Oct 2014 in reply to Petur Subev Link to this post

    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?
  7. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 03 Oct 2014 in reply to Ryan Link to this post

    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.
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 07 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 07 Oct 2014 in reply to Alex Gyoshev Link to this post

    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!




  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 08 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 08 Oct 2014 in reply to Alex Gyoshev Link to this post

    Hi Alex,

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


Back to Top
Kendo UI is VS 2017 Ready