dataItem.set() method performance

[Siarhei]

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.

[Alex Gyoshev]

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

 

 

[Siarhei]

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

[Alex Gyoshev]

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

 

 

[Siarhei]

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​

 

[Siarhei]

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).

[Siarhei]

Opps..Gave incorrect dojo link. Here is a correct one: http://dojo.telerik.com/ubeTe/2

[Siarhei]

http://dojo.telerik.com/ubeTe/6. Sorry, put loadOnDemand into incorrect place

[Alex Gyoshev]

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

 

 

[Siarhei]

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

[Alex Gyoshev]

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

 

 

[Siarhei]

Thanks,

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