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
}),
...