Question

似乎Kendo UI网格在包裹在bootstrap模态窗口内时会正确过滤...

在Chrome和Firefox中，您甚至无法输入过滤器文本框。我已删除所有CSS类无济于事。在IE中你至少可以打字，但当你点击'过滤'时没有任何事情发生......

有什么想法吗？

这是我的HTML ...

 <div id="propertyPicker"
    class="modal large hide fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="propertyPickerLabel"
    aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3 id="propertyPickerLabel">Property Picker</h3>
        </div>

    <div class="modal-body">

         <div data-role="grid"
            data-sortable="true"                
            data-pageable="{                                
                            'info': true,
                            'pageSizes': [10,25,50],                                
                            }" 
            data-filterable="true"                                                   
            data-bind="source: collateralList"              
            data-columns="[
                            {field: 'Name', title: 'Property', filterable: { 'extra': false }},
                            {field: 'StreetAddress', title: 'Address', filterable: { 'extra': false }},
                            {field: 'City', title: 'City', filterable: { 'extra': false }},
                            {field: 'Acronym', title: 'State', filterable: { 'extra': false }},
                            {field: 'ZipCode', title: 'Zip', filterable: { 'extra': false }}
                          ]">


        </div>


    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save</button>
    </div>

</div>

这是我的javascript ...

var viewModel = kendo.observable({ 
... 
collateralList: new kendo.data.DataSource({
            type: "odata",                
            transport: {
                read: {                        
                    url: "@Url.Content("~/Services/{SomeDataService}.svc/Collaterals?$select=ID,Name,StreetAddress,City,Acronym,ZipCode")"
                }
            },                
            pageSize: 10,
            serverPaging: true,
            serverSorting: true,  
            serverFiltering: true

        }),
 ...

Answer 1

看起来这个答案可能会帮到你。显然Bootstrap存在问题。

Twitter Bootstrap Modal Blocks Text Input Field

KendoUI网格过滤器没有

1 个答案: