How can I make the kendo ui grid filter editors work in a jquery ui dialog

1
votes

It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.

http://jsbin.com/itehom/14/edit

Repo steps

  1. click "pull the grid into a dialog"
  2. click the filter icon on any column
  3. try to place your mouse in the text field inside the filter editor.
3
kendo-ui
The problem is likely to be with jQuery version: you are using 2.0 while Kendo UI supports (distributes) 1.9.1 – OnaBai
Thanks for the reply. I tested the jsbin against 1.9.1 and that did not fix my issue. :( – Chris McKenzie
If you can live without jQueryUI, this does the same jsbin.com/oquqej/1 – OnaBai
The problem is with modal : true if you set it to false, it works – OnaBai
you are correct this look some conflict between this plugins hope next version of either will have this issue resolved. I used kendowindow model instead of jQuery UI plugin instead. :) – bijayk

3 Answers

1
votes

Set modal: false for jQuery dialog.

0
votes

Try following

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

If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.

$(document).off('focusin');

As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.

The entire code block of my prototype is like:

<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
    blah, blah, ...
</div>

<script>
    $(function () {
        $("#viewSearchResults").dialog({
            autoOpen: false,
            modal: true,
            minWidth: 700
        });
        $("#opener").click(function () {
            $("#viewSearchResults").dialog("open");
            $(document).off('focusin');
        });
    });
</script>

Hope the above can save some time for some developers. Thanks.