The column filter icon is not being displayed in IE10 for the columns that have to be scrolled to see. The columns that are visible when the page loads do have the filter icon, but the rest of the columns do not have it when you scroll with the mouse. However, when you scroll with the keyboard using the arrow keys, the filter icons are loaded, and it works fine in FireFox and Chrome.
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
<script src="~/Scripts/js/kendo.web.min.js"></script>
<script src="~/Scripts/js/kendo.aspnetmvc.min.js"></script>
@(Html.Kendo().Grid(Model)
.Name("myGrid")
.Columns(columns =>
{
columns.Bound...
})
.DataSource(d => d
.Ajax()
.ServerOperation(false)
.Read(r => r.Action("Read", "Report").Data("dataForQuery")))
.Groupable()
.Filterable(f => f
.Extra(false)
.Operators(o => o.ForString(s => s.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
)
)
)
.Pageable(pager => pager
.PageSizes(new int[] { 10, 20, 50 })
)
.Events(ev => ev.DataBound("onDataBound"))
.Sortable()
.HtmlAttributes(new { style = "width: 90%;" })
.Scrollable(s => s.Height("100%"))
}
)
)
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
<script src="~/Scripts/js/kendo.web.min.js"></script>
<script src="~/Scripts/js/kendo.aspnetmvc.min.js"></script>
@(Html.Kendo().Grid(Model)
.Name("myGrid")
.Columns(columns =>
{
columns.Bound...
})
.DataSource(d => d
.Ajax()
.ServerOperation(false)
.Read(r => r.Action("Read", "Report").Data("dataForQuery")))
.Groupable()
.Filterable(f => f
.Extra(false)
.Operators(o => o.ForString(s => s.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
)
)
)
.Pageable(pager => pager
.PageSizes(new int[] { 10, 20, 50 })
)
.Events(ev => ev.DataBound("onDataBound"))
.Sortable()
.HtmlAttributes(new { style = "width: 90%;" })
.Scrollable(s => s.Height("100%"))
}
)
)