我在Kendo UI网格上遇到了这个奇怪的问题.我有一个可过滤的网格,但它在模态内.但问题是当我过滤一个列(文本列)时,我无法在过滤器文本框中键入.这很奇怪,因为在所有浏览器中它都不起作用.这是我的例子repro
<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">
这也修复了你原来的小提琴.
