This is a migrated thread and some comments may be shown as answers.

Issue with Grid Filter (on Chrome 55.0.2883.75)

16 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joon-Sae
Top achievements
Rank 1
Joon-Sae asked on 08 Dec 2016, 12:06 AM

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)

16 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 09 Dec 2016, 08:22 AM
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.
0
Neal
Top achievements
Rank 1
answered on 21 Dec 2016, 04:29 PM

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

0
Andrey
Top achievements
Rank 1
answered on 21 Dec 2016, 10:11 PM

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);
    });

});

0
Dimiter Topalov
Telerik team
answered on 22 Dec 2016, 09:17 AM
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.
0
Neal
Top achievements
Rank 1
answered on 22 Dec 2016, 02:21 PM

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

Neal

0
Dimiter Topalov
Telerik team
answered on 26 Dec 2016, 11:49 AM
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.
0
Neal
Top achievements
Rank 1
answered on 27 Dec 2016, 05:24 AM

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

0
Dimiter Topalov
Telerik team
answered on 27 Dec 2016, 07:45 AM
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.
0
Neal
Top achievements
Rank 1
answered on 27 Dec 2016, 04:34 PM
That works perfectly.  Thanks!
0
Jared
Top achievements
Rank 2
answered on 04 Jan 2017, 06:35 PM
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.  
0
Dimiter Topalov
Telerik team
answered on 05 Jan 2017, 01:26 PM
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.
0
Douglas
Top achievements
Rank 1
answered on 11 Jan 2017, 07:56 PM

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?  

0
Dimiter Topalov
Telerik team
answered on 13 Jan 2017, 12:48 PM
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.
0
Kenneth Boot
Top achievements
Rank 1
answered on 27 Feb 2017, 05:57 PM
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?
0
Kenneth Boot
Top achievements
Rank 1
answered on 27 Feb 2017, 08:05 PM
Actually, this is working with the latest version.  Our web server folder mapping was inadvertently connected to an older version of the .js files.
0
Dimiter Topalov
Telerik team
answered on 01 Mar 2017, 07:32 AM
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.
Tags
Grid
Asked by
Joon-Sae
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Neal
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Jared
Top achievements
Rank 2
Douglas
Top achievements
Rank 1
Kenneth Boot
Top achievements
Rank 1
Share this question
or