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

dataItem.set() method performance

11 Answers 229 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Siarhei
Top achievements
Rank 1
Siarhei asked on 12 Oct 2015, 08:17 AM

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.

11 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 13 Oct 2015, 07:59 AM

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!
 
0
Siarhei
Top achievements
Rank 1
answered on 13 Oct 2015, 08:34 AM

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!!!

0
Accepted
Alex Gyoshev
Telerik team
answered on 15 Oct 2015, 06:37 AM

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!
 
0
Siarhei
Top achievements
Rank 1
answered on 15 Oct 2015, 02:36 PM

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​

 

0
Siarhei
Top achievements
Rank 1
answered on 15 Oct 2015, 02:39 PM
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).
0
Siarhei
Top achievements
Rank 1
answered on 19 Oct 2015, 11:20 AM
Opps..Gave incorrect dojo link. Here is a correct one: http://dojo.telerik.com/ubeTe/2
0
Siarhei
Top achievements
Rank 1
answered on 19 Oct 2015, 01:18 PM
http://dojo.telerik.com/ubeTe/6. Sorry, put loadOnDemand into incorrect place
0
Accepted
Alex Gyoshev
Telerik team
answered on 19 Oct 2015, 03:11 PM

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!
 
0
Siarhei
Top achievements
Rank 1
answered on 22 Oct 2015, 11:58 AM

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

0
Accepted
Alex Gyoshev
Telerik team
answered on 26 Oct 2015, 07:53 AM

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!
 
0
Siarhei
Top achievements
Rank 1
answered on 03 Nov 2015, 09:34 AM

Thanks,

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

Tags
TreeView
Asked by
Siarhei
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Siarhei
Top achievements
Rank 1
Share this question
or