kendo-ui – Kendo UI网格过滤器无法在引导程序Modal中运行

我在Kendo UI网格上遇到了这个奇怪的问题.我有一个可过滤的网格,但它在模态内.但问题是当我过滤一个列(文本列)时,我无法在过滤器文本框中键入.这很奇怪,因为在所有浏览器中它都不起作用.这是我的例子repro

Jsfiddle Demo Here

<div class="container">
    <h3>Modal Example</h3>
    <div>
        <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>

    <!-- Modal -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Kendo Not working on Modal</h3>
        </div>
        <div class="modal-body">
            <div id="grid" style="height:300px;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

var sharedDataSource = new kendo.data.DataSource({
    data: [
        { id: 1,value: 10,item: "Item1" },{ id: 2,value: 12,item: "Item2" },{ id: 3,value: 15,item: "Item3" },{ id: 4,value: 18,item: "Item4" },{ id: 5,value: 22,item: "Item5" },{ id: 6,value: 11,item: "Item6" }
    ],schema: {
        model: {
            id: "id",fields: {
                id: { type: "number",editable: false },value: { type: "number" },item: { type: "string" }
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: sharedDataSource,autoBind: false,editable: true,filterable: true,toolbar: ["save","cancel"]
});

sharedDataSource.read();

解决方法

@Edin的答案是正确的;有用.但原因并不十分清楚.简短的调查导致一个非常简单的修复;只需从模态中删除tabindex,如下所示：

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

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

这也修复了你原来的小提琴.