TreeView refresh filter after set checked

[fretje]

I have a treeView with checkable nodes and a couple of buttons with which I can "check all" and "check none".

These buttons run through dataSource.data() and and call set('checked', true) or set('checked', false) on each node.

 This all works well until I start filtering the dataSource by its 'checked' state:

dataSource.filter({ field: 'checked', operator: 'eq', value: true });

When the filter is on (means I want to only see the checked items), and I click on "check none", I would like all the items in the treeview to dissapear (which is what the datasource tells me when I look at dataSource.view(): it contains 0 items). When I click on "check all", I would like all the items in the treeview to appear. Also, when I uncheck an individual item, I would like it to dissapear immediately.

I can accomplish that with re-setting the filter, but the problem is that this takes ages. With a treeview of 1300 items (and this is without any children loaded), resetting the filter takes almost 10 seconds!

Is there a better - or rather usable - way to refresh the treeview's filter after a node has been checked/unchecked?

[Alexander Popov]

Hi fretje,

Changing the DataSource filter will redraw the TreeView, which could be rather slow, especially when dealing with lots of nodes. You could try simply hiding the DOM elements once the check event is triggered, as shown in this proof of concept example.

Regards,
Alexander Popov
Telerik

 

 

[fretje]

Hi Alexander,

Thanks for the reply!

That's actually what I do now when the "checkedFilter" is active and a checkbox is unchecked. Actually, I don't use the check event, but I use:

$schemaTree.on('click', 'input:checkbox', function(e) {
    var nodeData = schemaTree.dataItem(this);
    if ($checkedFilterBtn.hasClass('active'))
        schemaTree.detach(schemaTree.findByUid(nodeData.uid));
});

So I also use detach() in stead of hide(). I don't know what's better? Is there any preference what to use?

The problem is when I uncheck the "checkedFilter", how do I get those hidden entries back without applying the filter again?

On the other hand, I talked to my client about this, and he doesn't really mind that it takes so long, but then he would like to see a progress indicator, so he knows that something is happening.

I tried this code right before I set the filters:

kendo.ui.progress($schemaTree, true);

where $schemaTree is the <div> element (jquery object) of the treeview in question.

But no indicator is shown. The browser seems to be stuck (not responding) during the whole time the treeview is redrawn. 

How can I show a progress indicator during that time?

[fretje]

Ok, I (kind of) solved it with the following code:

kendo.ui.progress($schemaTree, true);
setTimeout(function() {
    schemaSource.filter(filters);
    kendo.ui.progress($schemaTree, false);
}, 0);

which does show the progress indicator, although it's not really "spinning"... 

Any suggestions for a better solution are definitely welcome!

I guess the only solution for this is if DataSource.filter() would use some kind of background processing, so the UI gets to be updated now and then (something like https://github.com/kmalakoff/background, or for more info: http://stackoverflow.com/q/1160137/101371).

[Alexander Popov]

Hi fretje,

Indeed, the spinner cannot be properly animated when there are other operations running at the same time. I am afraid there is no workaround we could suggest, as using a different thread to update the UI is currently not supported.

Regards,
Alexander Popov
Telerik