3

It seems that the Kendo UI grid does filter correctly when wrapped inside of a bootstrap modal window...

In Chrome and Firefox you cannot even type in the filter textboxes. I've removed all CSS classes to no avail. In IE you can at least type, but when you click 'Filter' nothing happens...

Any ideas?

here is my 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>

Here is my 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

        }),
 ...
4

1 回答 1

1

看起来这个答案可以帮助你。显然 Bootstrap 存在问题。

Twitter Bootstrap 模态块文本输入字段

于 2013-05-29T14:33:35.333 回答