kendo-ui - Kendo UI 网格过滤器在引导模式内不起作用

Question

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

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

Answer 1

@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">

这也修复了你原来的 fiddle 。