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">&times;</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 中不起作用

如何在引导模式内的kendo-ui网格输入上设置输入焦点

asp.net core kendo ui 网格自定义命令模板不起作用

Kendo UI 参考在 Razor 视图中不起作用

Kendo UI Grid 上的分页不起作用

如果dataBound用于设置选定值,则Kendo UI Dropdownlist客户端过滤器不起作用