Filter Checkbox Issues

[Max]

I have a need to do the following two things with my grid's column filter menu dropdown checkboxes:

1) Sort the checkboxes alphabetically by their value (by default the are sorted by the grid's datasource sort value).

2) Filter all other column's checkbox values based on the filter selection of the first checkbox.

 

I found examples on here which show how to do each of these things, but when combined together I'm noticing that, because the grid and the filter menu share the same datasource, as soon as the filter menu is opened and the checkboxes are sorted/displayed, the entire grid is sorted as well.

 

I've created an example here: http://dojo.telerik.com/@mcook103/oxilA

[Stefan]

Hello Max,

Based on the provided requirements I can suggest checking one of our new example demonstrating how to achieve the desired results. This will also remove the undesired effect of sorting the whole Grid:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/grid-with-excel-like-filter

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Max]

Hi Stefan,

Thanks for your reply.  

The example you provided does indeed work, however we have report which can sometimes return as many as 50,000 rows.  Even without implementing the "excel-like" filtering, the grid's performance is terrible.  When this style of filtering is enabled, even clicking on a column's filter freezes the browser.

We have a Silverlight version of the same report which uses your (Telerik's) grid as well.  With 50K rows, there are no client-side performance issues whatsoever, and the "excel-like" filtering is enabled by default, out of the box.

1) Why doesn't Telerik make more of its grid features easily configurable?  It seems like you have to jump through a lot of hoops to get some very basic things accomplished (e.g. automatically expanding a grid to fill its container div, filtering as described in this post, being allowed to choose which columns are exported to excel/pdf, etc.).

2) Can you point me to an example that shows the best way to implement a grid with 50K+ rows and that has excel-like filtering?

Thanks for your help,

Max

[Stefan]

Hello Max,

Regarding the questions:

1) In general, we implement the widget features based on the community demand in our feedback portal. For other common scenarios, we have a how-to examples or demos which demonstrate how the desired functionality can be achieved in a few steps.

2) I modify the example to simulates working with 50 000 records, and it is working as expected when a pageSize is used:

http://dojo.telerik.com/OlAjUg

Please have in mind that using a Grid with 50 000 records with no paging is a very resource consuming feature as it is creating hundreds of thousand DOM elements. The Kendo UI team has no full control over how fast these DOM elements will be generated and rendered as this depends on the browser and the used machine.

Indeed the SilverLight Grid can handle 50 000 seconds with no paging as it is using different technology than the one used in the jQuery based applications.

Regards,
Stefan
Progress Telerik

[Max]

Hi Stefan,

 

Thanks for the updated Dojo example - very helpful.  One thing I noticed (perhaps a bug?) is that the filter checkboxes only display options related to the data that's displayed on the current page of the grid.  For example if Page 1 has five rows with "Units In Stock" of [1, 2, 3, 4, 5], you will see filter checkboxes for those five numbers only.  However on Page 2 of the grid, if the "Units In Stock" row data has [3, 4, 5, 6, 7], the filter for that column does not show [1, 2] since there are no rows on Page 2 that have those values.  So really, you're filtering the data on that page, not on the entire grid.

 

Is there a way to achieve what I'm looking for?

 

Thanks,

Max

[Stefan]

Hello Max,

The desired result can be achieved by passing all of the Grid data instead of just the view the to the uniqueDsResult function. Also, the custom logic on the dataSource change event has to be removed:

var uniqueDsResult = removeDuplicates(grid.dataSource.data(), e.field);

change: function(e) {
                filterSource.data(e.items);
}

Please have in mind that this will again lead to slow opening of the filter menu as it will create thousands of DOM elements in the menu(checkboxes, labels and spans) 

Also, please have in mind that showing thousands of items for filtering using the check box menu may not be user-friendly as the user have to manually scroll through the items and click them one by one.

Regards,
Stefan
Progress Telerik

[Max]

Hi Stefan,

I made your suggested changes to my Dojo and it doesn't appear to be working (unless I made an error):

http://dojo.telerik.com/@mcook103/UtinA

 

If I filter first on "ProductName = Chai", the "UnitPrice" filter has all of the prices for the entire grid.  It should only show the price of Chai ($18.00).

 

I feel like the "grid with Excel-like filter" example is misleading as it doesn't behave as Exel does.

 

Thanks,

Max

[Stefan]

Hello Max,

The mentioned result occurs because the whole data is passed every time the menu is opened.

If the desired result is to have all of the data only the first time, I can suggest adding the following logic to check if the filters are empty:

if(grid.dataSource.filter.length == 0){
 var uniqueDsResult = removeDuplicates(grid.dataSource.data(), e.field);
}
else{
 var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
}

http://dojo.telerik.com/IBayAn

Thank you for the feedback. The example is indeed not identical to the Excel filter, but it has the point to demonstrate a functionality as close to the Excel filter as possible.

Regards,
Stefan
Progress Telerik

[Max]

Hi Stefan,

 

The code that you posted in your last reply doesn't appear to work.  The value of grid.dataSource.filter.length is always 1, so the .view() is always used for uniqueDsResult.  I modified it to look like this:

 

if ((typeof grid.dataSource._filter == 'undefined')) {
        var uniqueDsResult = removeDuplicates(grid.dataSource.data(), e.field);
 }
 else {
       var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
 }

 

One thing that I'm noticing with my grid (i.e. not the Dojo example) is that with 30K+ rows, the thing that seems to be taking the most time is sorting the filterSource:

filterSource.sort({ field: e.field, dir: "asc" });

 

The first time a filter dropdown is opened and the sort is called it takes 2-4 seconds.  Then, without setting a filter, the sort on any other column (including the first one) takes less than a second.  I'm wondering if there is a faster way I can sort the filterSource?

 

Perhaps in a future release there could be a grid option such as:

filterable: {
      excelLike: true,
      sortCheckboxes: "asc"
 }

 

 

[Stefan]

Hello Max,

Indeed the condition logic has to be changed. I can suggest checking if the filter method will return undefined instead of using a private property.

if(grid.dataSource.filter() == undefined)

As for the sorting, after different tests, the loading time with and without sorting is almost identical on my end with a different number of items (including 30k+).A

As for a built-in property, we had a similar request in our feedback portal, but it was decided to make it as a custom scenario and to demonstrate the approach with the discussed example:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/9197598-excel-like-filter-respect-other-filtration-appli

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/3236069-grid-excel-google-like-filtering

Regards,
Stefan
Progress Telerik