Grid not filtering in IE9

[Mark]

I'm having trouble getting a kendo grid to filter in IE9 when it is open in a bootstrap modal window. JSBin here: http://jsbin.com/qoxox/2

I'm using v2013.3.1324 inhouse although the behaviour is the same with v2013.3.1119 used here. Jquery version seems not to matter.

When I:
-> click on the button
-> modal is shown with data in the grid
-> click filter on Name column
-> change option to Contains, enter 'g', click 'Filter' button

The expected behaviour for all browsers is (not in order):
-> 'grid.dataSource.filter' fires
-> the log function is triggered
-> the grid is filtered to just one entry

The actual behaviour in IE9 is:
-> 'grid.dataSource.filter' does not fire
-> the grid is not filtered

Firefox follows the expected behaviour, and I don't understand why IE9 does not do the same. Looking into the source for kendo.all.js, the DataSource.filter function doesn't seem to be getting the same data in IE as FFox, but I can't see why that would be.

Is there anything special I need to do to get this working in IE as well as FFox?

[Dimiter Madjarov]

Hello Mark,


Thank you for the detailed information. We are aware of this issue and of a similar one in IE 11, where the numeric text boxes of the filter menu are not receiving focus, when the Grid is inside a Bootstrap modal window. The problem is still under investigation. We are looking for the exact cause of the issue in order to determine if it is on our side or not.

I will mark myself to get back to you, when we got more information on this topic.

Regards,
Dimiter Madjarov
Telerik

[Dimiter Madjarov]

Hi Mark,


We found that the reason for the issue was that  the Bootstrap modal was preventing interactions with any elements, which are not part of the window content. This was preventing the focus of the filter menu inputs as it is in Kendo popup window, which is appended at the end of the body element and then absolutely positioned. Nevertheless we could not exactly state why is this happening in Internet Explorer only, as we have not debugged the Bootstrap code itself.

A possible solution is the one mentioned in the following forum topic, which suggests to disable the focus listener of the modal window. Please add the following code before opening the modal window.
E.g.

$('#myModal').on('shown', function () {
    $(document).off('focusin.modal');
});

$('#myModal').modal('show');

I hope this information helps. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Swati]

This solution worked for me with "shown.bs.modal" instead of "shown". Thanks