Issue with Grid Filter (on Chrome 55.0.2883.75)

[Joon-Sae]

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)

[Dimiter Topalov]

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

[Abhishek]

Hi Dimiter,

Thanks for sharing the above solution, It worked fine.

I have another issue with dropdown control inside the context menu filter.

User can filter the grid by selecting the value from dropdown and as soon user click on dropdown, filter dialogue goes away.

Is there any way to fix this problem.

Thanks

Abhishek

[Neli]

Hi Abhishek,

Could you please provide more details about the implementation and Grid configuration on your side?

It will be very helpful if you could modify the Dojo example linked here in order to replicate the issue and send it back for review. This way we could understand the scenario better and advise you further.

Regards,

Neli

[Neal]

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

[Andrey]

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

});

[Dimiter Topalov]

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

[Neal]

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

Neal

[Dimiter Topalov]

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

[Neal]

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

[Dimiter Topalov]

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

[Neal]

That works perfectly.  Thanks!

[Jared]

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.  

[Dimiter Topalov]

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

[Douglas]

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?  

[Dimiter Topalov]

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

[Kenneth Boot]

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?

[Kenneth Boot]

Actually, this is working with the latest version.  Our web server folder mapping was inadvertently connected to an older version of the .js files.

[Dimiter Topalov]

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