Filter Checkbox Issues

10 posts, 0 answers
  1. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 21 Jul 2017 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 25 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 31 Jul 2017 Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 02 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 03 Aug 2017 Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 07 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 07 Aug 2017 Link to this post

    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

  8. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 09 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Max
    Max avatar
    20 posts
    Member since:
    Mar 2010

    Posted 09 Aug 2017 Link to this post

    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"
     }

     

     

  10. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 11 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top