Banging my head off a wall trying to configure column filtering in a grid within an mvc app.
Main issues are with datepicker filtering and the filter icon on each column missing.
Im pretty sure Ive the latest version of the kendo ui for mvc installed (thats another story, very confused over what to be using!)
Using the following scripts -
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.common.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.bootstrap.min.css" rel="stylesheet">
<script src="~/Scripts/Kendo_UI_2017_R2/js/jquery.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/jszip.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/kendo.all.min.js"></script>
<script src="~/Scripts/Kendo_UI_2017_R2/js/kendo.custom.min.js"></script>
I used the custom builder to build kendo.custom.min and included aspnetmvc.min.js
I've attached an img of how the datepicker is displaying, and one of the missing filter icon
Missing icon works on a different screen, with a class of k-i-filter, in the case where its missing its k-filter
Grid code below:
<
tbody
>
@(Html.Kendo().Grid<
OriginGreen.Models.CompanySearchGridViewModel.CompanyModel
>()
.Name("CompaniesGrid")
.Columns(columns =>
{
columns.Bound(c => c.Name).ClientTemplate("<
a
href
=
'" + Url.Action("ManageCompanies") + "/#= CompanyId #'
" + ">#= Name #</
a
>").Title("Company Name").Width(100); //.Filterable(filterable => filterable.UI("nameFilter"));
columns.Bound(c => c.Plan_Version).Title("Plan Version").Width(100);
columns.Bound(c => c.Duration).Title("Duration").Width(100);
columns.Bound(c => c.Period).Title("AR Year").Width(100);
columns.Bound(c => c.New_Legacy_Plan).Title("New/Legacy").Width(100);
columns.Bound(c => c.Next_AR_Due_Date).Format("{0:dd/MM/yyyy}").Title("Next AR Due Date").Width(200).Filterable(f => f.UI("DateFilter"));
columns.Bound(c => c.Current_Status).Title("Current Status").Width(100);
columns.Bound(c => c.Assigned_To).Title("Assigned To").Width(100);
columns.Bound(c => c.BordBiaUserId).Title("BB Reviewer").Width(100);
columns.Bound(c => c.ThirdPartyUserId).Title("SGS Reviewer").Width(100);
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Company_List_Admin.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Plan"))
.AllPages(true))
.Events(e => e.DataBound("onRowBound"))
.Pageable()
.Sortable()
.Scrollable()
.Selectable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
)
.ForNumber(num => num.Clear()
.IsEqualTo("Is Equal To")
.IsNotEqualTo("Is Not Equal To")
.IsGreaterThan("Is Greater Than")
.IsLessThan("Is Less Than")
)
.ForDate(dt => dt.Clear()
.IsEqualTo("Is Equal To")
.IsNotEqualTo("Is Not Equal To")
.IsGreaterThan("Is Greater Than")
.IsLessThan("Is Less Than")
)
)
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(10)
.Batch(true)
.Model(model =>
{
model.Id(c => c.CompanyId);
})
.Read(read => read.Action("DisplayAdminSearchGrid", "Plan").Type(HttpVerbs.Get))
)
)
</
tbody
>
<
script
type
=
"text/javascript"
>
function DateFilter(control) {
$(control).kendoDatePicker();
}
</
script
>