Kendo UI 网格过滤器在引导模式中不起作用
Posted
技术标签:
【中文标题】Kendo UI 网格过滤器在引导模式中不起作用【英文标题】:Kendo UI grid filters not working inside a bootstrap Modal 【发布时间】:2015-05-25 22:38:57 【问题描述】:我在 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();
【问题讨论】:
奇怪的是,在你的小提琴中,我无法在开发工具上没有选择器的情况下工作,实际上也没有 jQuery 选择器document.querySelector
。
也经历过,
【参考方案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">
这也修复了你原来的小提琴。
【讨论】:
不幸的是,这不适用于 IE11。如剑道论坛link 所示,这也可以解决问题:$('#myModal1').on('shown', function () $(document).off('focusin.modal'); );
【参考方案2】:
我已经编辑了你的 JSFiddle,一切正常。
JSFiddle
我已经包含了 jQuery 2.1、Bootstrap 3 和 Kendo 文件(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">×</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>
【讨论】:
以上是关于Kendo UI 网格过滤器在引导模式中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Kendo UI 异步上传在 Internet Explorer 中不起作用