Kendo ui 剑道UI网格过滤器在引导模式内不工作

我在剑道UI网格上遇到了这个奇怪的问题。我有一个网格是可过滤的，但它在模态内部。但问题是，当我筛选一列（文本列）时，我无法在筛选文本框中键入内容。这很奇怪，因为在所有浏览器中它都不工作。这是我的例子

模态示例
×
剑道不在模态上工作
接近
保存更改

var sharedDataSource=new kendo.data.DataSource({
数据：[
{id:1，值：10，项：“Item1”}，
{id:2，值：12，项：“Item2”}，
{id:3，值：15，项：“Item3”}，
{id:4，值：18，项：“Item4”}，
{id:5，值：22，项：“Item5”}，
{id:6，值：11，项：“Item6”}
],
模式：{
型号：{
id:“id”，
字段：{
id:{type:“number”，可编辑：false}，
值：{type:“number”}，
项：{type:“string”}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：sharedDataSource，
自动绑定：错误，
是的，
可过滤：正确，
工具栏：[“保存”、“取消”]
});
sharedDataSource.read（）；

我编辑了你的JSFIDLE，一切正常

我已经包括了jQuery2.1、bootstrap3和剑道文件（css和js）

这是我的另一个代码示例，我已经尝试过了，过滤器对我来说很好

<div class="row">
    <div class="col-lg-12">
        <div class="bs-example">
            <!-- Button HTML (to Trigger Modal) -->
            <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

            <!-- Modal HTML -->
            <div id="myModal" class="modal fade">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Confirmation</h4>
                        </div>
                        <div class="modal-body">
                            <div id="grid"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>     
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: 550,
            groupable: true,
            filterable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });
    });
</script>

&时代；
确认书
接近
保存更改
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
页面大小：20
},
身高：550，
分组：对，
可过滤：正确，
可排序：是的，
可分页：{
刷新：是的，
页面大小：对，
按钮数：5
},
栏目：[{
字段：“联系人姓名”，
标题：“联系人姓名”，
宽度：240
}, {
字段：“ContactTitle”，
标题：“联系人标题”
}, {
字段：“公司名称”，
标题：“公司名称”
}, {
字段：“国家”，
宽度：150
}]
});
});

由@Edin给出的答案是正确的；它起作用了。但原因并不十分清楚。短暂的调查导致了一个相当简单的解决方案；只需从模式中删除

选项卡index

，如下所示：

<!-- not working with tabindex -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

<!-- this will -->
<div id="myModal1" class="modal hide" role="dialog">

---

这也修复了您原来的小提琴。

奇怪的是，在您的小提琴中，我无法在开发工具上使用选择器，没有jQuery选择器，也没有

document.querySelector

实际上。我也经历过这一点，不幸的是，这对IE11不起作用。如剑道论坛中所示，这也会起到作用：

$（'#myModal1'）.on（'showed'，function（）{$（document）.off（'focusin.modal'）；}）