dataItem.set() method performance

12 posts, 4 answers
  1. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 12 Oct 2015 Link to this post

    Hello,

    I need to restore treeview checkbox's state from an object that doesn't reflects tree structure. Tree is already bound. The object contains list of items that are to be checked. These items can lay on different layers of the tree. To accomplish this i use dataItem.set() method. It works great if i need to call it less then 50 times. But once i do it 200+ times - it works really slow(about 6-7 second).

     Is there any way to improve performance of this method or do the same in different (faster) way?

     

    Thanks a lot.

  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 13 Oct 2015 Link to this post

    Hello Siarhei,

    Are you using the checkChildren functionality? If so, you can check the items manually and call the updateIndeterminate method afterwards. See this Dojo snippet for a way to achieve this.

    Regards,
    Alex Gyoshev
    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. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 13 Oct 2015 in reply to Alex Gyoshev Link to this post

    Thanks for the reply.

     

    Unfortunately updateIndeterminate didn't help me.

    From source code i see the following:

    updateIndeterminate: function(node) {
                // top-down update of inital indeterminate state for all nodes
                node = node || this.wrapper;

                var subnodes = subGroup(node).children();
                var i;
                var checkbox;

                if (subnodes.length) {
                    for (i = 0; i < subnodes.length; i++) {
                        this.updateIndeterminate(subnodes.eq(i));
                    }

                    checkbox = this._setIndeterminate(node);

                    if (checkbox && checkbox.prop(CHECKED)) {
                        this.dataItem(node).checked = true;
                    }

                }
            },this.dataItem(node)​

     

    So it does update dataItem only if it has children. The only thing that this method does - it updates parent checkbox state to "indeterminate" state. dataItem that this node belongs to doesn't get updated.

    Moreover in my code i use "check" event to show list of checked items at the top of the tree. So i need this event to be fired.

     

    I know scenario is not straightforward but anyway i'm counting on you help (because i spent several days struggling with this and didn't find workaround).

     

    Thanks a lot!!!

  5. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Oct 2015 Link to this post

    Hello Siarhei,

    My previous suggestion shows how to update the nodes checked state manually, and you can call updateIndeterminate and the check handler directly afterwards. This will improve the performance, as the TreeView state will not be validated on each check.

    If these suggestions do not help, please provide a runnable sample in the Dojo so that we can resolve the issues more quickly.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 15 Oct 2015 in reply to Alex Gyoshev Link to this post

    Thanks a lot once again.

     The problem was that i was using loadOnDemand = false. Once i switched it on - it got work.

    But i face another problem.

     How can we bind 'checked' from datasource. Again it do bind correctly when loadOnDemand = false (when all nodes are loaded). But if loadOnDemand = true - it does update nodes states but it doesn't update their parent's state.

     

    http://dojo.telerik.com/oGAJo/5​

     

  7. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 15 Oct 2015 in reply to Siarhei Link to this post

    I need loadOnDeamnd to be set to true because i use custom "server ondemand". With loadOnDemand set to false it doesn't show expand icon if i set hasChildren to true and don't provide list of items at the same time (in datasource).
  8. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 19 Oct 2015 in reply to Siarhei Link to this post

    Opps..Gave incorrect dojo link. Here is a correct one: http://dojo.telerik.com/ubeTe/2
  9. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 19 Oct 2015 in reply to Siarhei Link to this post

    http://dojo.telerik.com/ubeTe/6. Sorry, put loadOnDemand into incorrect place
  10. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Oct 2015 Link to this post

    Hello Siarhei,

    From what I understand, the issue you are facing is that the indeterminate state of the checkboxes is not correct when loading nodes on demand. If this is not the problem, pleease elaborate.
    Assuming that this is the problem, you need to serialize the indeterminate state in order to show it correctly. Since the TreeView does not do this automatically, the state should be applied in the dataBound event. See this Dojo snippet.
    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. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 22 Oct 2015 in reply to Alex Gyoshev Link to this post

    Thanks. Your snippet helped me a lot, but there is another issue.

     

    In dataBound event handler i have the following.

     

    var items = e.node ? e.node.find(".k-group:first>.k-item") : this.root.children();

                        for (var i = 0; i < items.length; i++) {
                            var dataItem = this.dataItem(items[i]);
                            if (dataItem && dataItem.indeterminate === true) {
                                delete dataItem.indeterminate;
                                if (dataItem.text === self.constants.allFilters) {
                                    $(".k-bot :checkbox", items[i]).first().prop("indeterminate", true);
                                } else {
                                    $(":checkbox", items[i]).prop("indeterminate", true);
                                }
                            }
                        }

     

    In expand event handler i manually call dataItem.load() method to load dataItem children (i need to know exact children length inside this event). I know that expand invokes dataItem.load() at the end as well. So dataBound event fires twice. When it fires second time "indeterminate" property for the item that was changed ($(":checkbox", items[i]).prop("indeterminate", true);) is undefined for some reason so that it gets unchecked again. For other items that haven't been change "indeterminate" property has value.

    I've tried to set dataItem.loaded(true) - but it doesn't have affect. dataItem.load() method doesn't check this property and fires dataBound event.

     

    Could you please tell me why this is happening and how to tackle with this?

     

    Thanks in advance.

     

    P.S. <Out of topic>  It would be great if user could edit posts on the forum

  12. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 26 Oct 2015 Link to this post

    Hello Siarhei,

    Can you please provide a sample that reproduces the problem? Also, as this diverges from the original issue, please submit this in a different thread.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Siarhei
    Siarhei avatar
    13 posts
    Member since:
    Sep 2014

    Posted 03 Nov 2015 in reply to Alex Gyoshev Link to this post

    Thanks,

    I just removed "delete dataItem.indeterminate;" line and now it works.

Back to Top
Kendo UI is VS 2017 Ready