Kendo UI grid filters not working inside a bootstr

问题:

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();

回答1:

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.

回答2:

I have edited you JSFiddle and everything works fine.

JSFiddle

I have included jQuery 2.1, Bootstrap 3 and Kendo files(css and js).

Here is my other code example, I have tried this and filters seems good to me.

<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>