Issue with Grid Filter (on Chrome 55.0.2883.75)

17 posts, 0 answers
  1. Joon-Sae
    Joon-Sae avatar
    3 posts
    Member since:
    Mar 2014

    Posted 07 Dec 2016 Link to this post

    On the latest and greatest Chrome version (updated today) there is some wonky behaviour in the Grid filter.

     

    I've created a dojo script to show the issue http://dojo.telerik.com/ipihu

    To see the issue, follow these steps

    1 -On the ProductName column, click the menu button to see the column menu

    2 - On the Filter sub menu, move your mouse to the right

    3 - In the filter menu, hover your mouse over the text area (just below the Is equal to)

    4 - The filter dialog goes away

     

     

    The issue is #4.  It shouldn't go away because i'm still hovering (intending to type something in)

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 09 Dec 2016 Link to this post

    Hi Joon-Sae,

    Thank you for bringing this issue to our attention. It was logged, and we will investigate it further, try to determine what is causing it, and provide a fix.

    Meanwhile you can use the following workaround (initially focus another element in the Filter menu programmatically):

    http://dojo.telerik.com/ipihu/3

    I have updated your Telerik points for helping us improve the quality of our product.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Neal
    Neal avatar
    4 posts
    Member since:
    Aug 2015

    Posted 21 Dec 2016 Link to this post

    Is there a way to make this work-around active for all grids without having add the additional code to each grid configuration individually?  Much in the same way I'm changing the default operator and list of operators for all grids using " kendo.ui.FilterMenu.fn.options.operators.string = {...".

     

    Thanks,

    Neal

  4. Andrey
    Andrey avatar
    1 posts
    Member since:
    Oct 2011

    Posted 21 Dec 2016 in reply to Neal Link to this post

    Neal, 

    I'm doing it this way:

     

    $(function(){

    function _onGridColumnMenuInit(e) {
            var menu = e.container.find(".k-menu").data("kendoMenu");
            if (menu) {
                menu.bind('activate', function (e) {
                    if (e.item.is('.k-filter-item')) {
                        // if an element in the submenu is focused first, the issue is not observed
                        e.item.find('span.k-dropdown.k-header').first().focus();
                        e.item.find('input').first().focus();
                    }
                });
            }
        }

        $('.k-grid').each(function () {
            $(this).data('kendoGrid')
            .bind('columnMenuInit', _onGridColumnMenuInit);
        });

    });

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 22 Dec 2016 Link to this post

    Hi Neal,

    The approach, used by Andrey is a valid one. Alternatively, you can use the following:

    kendo.ui.Grid.fn.options.columnMenuInit = function(e){
    var menu = e.container.find(".k-menu").data("kendoMenu");
    menu.bind('activate', function(e){
    if(e.item.is(':last-child')){
    // if an element in the submenu is focused first, the issue is not observed
    e.item.find('span.k-dropdown.k-header').first().focus();
    // e.item.find('input').first().focus();
    }
    });
    }


    http://dojo.telerik.com/ipihu/62

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  6. Neal
    Neal avatar
    4 posts
    Member since:
    Aug 2015

    Posted 22 Dec 2016 Link to this post

    Thanks guys.  Works great.  It is interesting to note that this does not work if the data is from a table.

    Neal

  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 26 Dec 2016 Link to this post

    Hi Neal,

    Merry Christmas!

    Can you please elaborate in a bit more details about the scenario in which the suggested approach does not work? I have prepared a simple Grid, initialized from an HTML table, and the workaround seems to be working as expected:

    http://dojo.telerik.com/Emuge

    Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  8. Neal
    Neal avatar
    4 posts
    Member since:
    Aug 2015

    Posted 26 Dec 2016 in reply to Dimiter Topalov Link to this post

    Dimiter,

    Thanks for following up.  I was wrong about the html data.  It is the locked column parameter that causes the workaround to fail. At least I think that's it.

    For example, I added this to your example and it does cause it to fail.

    columns: [
      { field: "title", width: 250, locked: true},
      { field: "year", width: 100},
    ],

    If I remove "locked: true" or set it to false, it fails.

    I hope this helps,

    Neal

  9. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 27 Dec 2016 Link to this post

    Hi Neal,

    Thank you for the clarification. The discussed workaround does not work in the described scenario with locked columns, because when there are locked columns in the Grid, the Filter menu is no longer last in the list of the Column menu (the lock/unlock column UI is), and therefore the selector

    ...
    if(e.item.is(':last-child')){
    ...

    ... no longer picks the Filter item. This can be easily fixed by replacing the ":last-child" selector with ".k-filter-item":

    http://dojo.telerik.com/ipihu/79

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  10. Neal
    Neal avatar
    4 posts
    Member since:
    Aug 2015

    Posted 27 Dec 2016 in reply to Dimiter Topalov Link to this post

    That works perfectly.  Thanks!
  11. Jared
    Jared avatar
    13 posts
    Member since:
    Oct 2015

    Posted 04 Jan Link to this post

    Any update on a solution to this?  The recommended workaround is working fine for us but just curious as to what caused it and what the timetable is for a permanent fix.  
  12. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 05 Jan Link to this post

    Hello Jared,

    The discussed issue was caused by the newly introduced support for pointer events in Google Chrome (v. 55) that in turn caused some issues with our internal Kendo UI Menu logic.

    The problem is already fixed, and the working version is supposed to be released along with the 2017 R1 version. The estimated date for the release is in the third week of January.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  13. Douglas
    Douglas avatar
    1 posts
    Member since:
    Jan 2017

    Posted 11 Jan in reply to Dimiter Topalov Link to this post

    Our live site is having this issue. We are on version 2014.1.318. I just upgraded to the latest release. Of course that didn't resolve the issue. Sounds like late January will include the fix.

    Having never worked with Telerik controls, which file do I add the temporary fix?  

  14. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 13 Jan Link to this post

    Hi Douglas,

    The official fix will be available in our 2017 R1 release, scheduled for next week.

    Meanwhile you can apply any of the previously suggested fixes that best suits your scenario, either in the Grid configuration options of each Grid in the respective files the Grids are initialized in.

    Alternatively, if you choose to override the prototype of all Grids on the page, this can happen anywhere where Kendo UI is defined, and available, and before the first Grid is initialized.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  15. Kenneth Boot
    Kenneth  Boot avatar
    17 posts
    Member since:
    Jun 2012

    Posted 27 Feb Link to this post

    We downloaded the latest version (v2017.1.223), but this still seems to be an issue in Chrome.  Is the behavior controlled at all by kendo.common.css or should it all be based upon the .js files?
  16. Kenneth Boot
    Kenneth  Boot avatar
    17 posts
    Member since:
    Jun 2012

    Posted 27 Feb in reply to Kenneth Boot Link to this post

    Actually, this is working with the latest version.  Our web server folder mapping was inadvertently connected to an older version of the .js files.
  17. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    569 posts

    Posted 01 Mar Link to this post

    Hello Kenneth,

    Thank you for the feedback. I am glad you have resolved the issue. Do not hesitate to contact us again, if you have any other Kendo UI-related questions or issues.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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