- 首页
- 其他开发
- Kendo UI 网格过滤器在引导模式内不起作用
Kendo UI 网格过滤器在引导模式内不起作用
[英] Kendo UI grid filters not working inside a bootstrap Modal
本文介绍了Kendo UI 网格过滤器在引导模式内不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 Kendo UI 网格上遇到了这个奇怪的问题.我有一个可过滤的网格，但它在模态内.但问题是当我过滤一列(文本列)时，我无法在过滤器文本框上输入.这很奇怪，因为在所有浏览器中它都不起作用.这是我的示例复制
Jsfiddle 演示在这里
<h3>模态示例</h3><div><a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
<!-- 模态--><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 不使用 Modal</h3>
<div class="modal-body"><div id="grid" style="height:300px;"></div>
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>
var sharedDataSource = new kendo.data.DataSource({数据: [{ 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" }],架构:{模型: {id: "id",字段:{id: { type: "number", editable: false },值:{类型:数字"}，项目:{ 类型:字符串"}}}}});$("#grid").kendoGrid({数据源:共享数据源，自动绑定:假，可真实，可过滤:真实，工具栏:[保存"，取消"]});sharedDataSource.read();
解决方案
@Edin 的回答是正确的；有用.但原因还不是很清楚.简短的调查导致了一个非常简单的修复；只需从模态中删除 tabindex，如下所示:
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog"><!-- 这将--><div id="myModal1" class="modal hide" role="dialog">
这也修复了你原来的小提琴.
I got this strange issue on Kendo UI grid. I have a grid which is filterable, but it is inside the modal. But the problem is when i Filter a column (Text column) i cannot type on the filter textbox. It is weird because in all browser it doesnt work. Here is my Example 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();
解决方案
The answer by @Edin is correct; it works. But the cause wasn't quite clear. Short investigation leads to a quite simple fix; simply remove the tabindex from the modal, like so:
<!-- not working with tabindex -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<!-- this will -->
<div id="myModal1" class="modal hide" role="dialog">
That also fixes your original fiddle.
这篇关于Kendo UI 网格过滤器在引导模式内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
