0
我为我们的时间表制作了KENDO网格，并且有一个“状态”列。我制作了一个自定义下拉筛选器，可在contractstatus上进行过滤[PendingValidation，ConsultantApproved，ApproverApproved，AccountApproved]。这些状态的值是0,1,2和3.我想要一个显示完整状态名称的DropDown，但是需要过滤值。Kendo Grid自定义DropDownList过滤器不能正常工作
一切都很好，通过使用资源显示文本，除非点击“过滤器”后没有任何反应。
在我进行自定义下拉菜单之前，使用了一个显示“1,2,3和4”的numericTextBox，而不是完整的状态名称。然后过滤工作完美无瑕。
这个jQuery我写的自定义：
///Adjust the status column filter
///So that there is a dropdown with string values
var grid = $("#grid").data("kendoGrid");
//alter the filter of the status column
grid.bind("filterMenuInit", function (e) {
// If the filter is for the "Status" column...
if (e.field == "Status") {
e.container.find("div.k-filter-help-text").text("Filter op status:");
e.container.find("span.k-dropdown:first").css("display", "none");
e.container.find("span.k-dropdown:eq(1)").css("display","none");
e.container.find("span.k-dropdown:eq(2)").css("display", "none");
e.container.find("span.k-numerictextbox").css("display", "none");
// Change the text field to a dropdownlist in the status filter menu.
var dropDownList = e.container.find(".k-numeric-wrap:first");
dropDownList.removeClass("k-numeric-wrap")
.kendoDropDownList({
autoWidth: true,
dataTextField: "title",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [ //TO-DO filter not working on id value
{ title: "@Resources.PendingValidation", value: 0},
{ title: "@Resources.ConsultantApproved", value: 1 },
{ title: "@Resources.ApproverApproved", value: 2 },
{ title: "@Resources.AccountApproved", value: 3 }
]
}),
dataTextField: "title",
dataValueField: "value",
optionLabel: "--Kies een status--"
})
}
});
//end statusfilter
这是格：
@(Html.Kendo().Grid<DownloadTimesheetsGridViewModel>()
.Name("grid")
.ToolBar(t =>
{
t.Template(Html.KendoGridToolbar(true, true).ToHtmlString());
})
.Columns(columns =>
{
columns.Bound(c => c.Year).Title(Resources.Year).ClientGroupHeaderTemplate("#= value #");
columns.Bound(c => c.Date).Title(Resources.Month).Format("{0:MMMM}").ClientGroupHeaderTemplate("Month : #= kendo.toString(value, 'MMMM') #").Filterable(f => f.UI("DateTimeFilter"));
columns.Bound(c => c.AccountName).Title(Resources.AccountName);
columns.Bound(c => c.ProjectName).Title(Resources.Project);
columns.Bound(c => c.TotalHoursWorked.TotalHours)
.Title(Resources.HoursWorked)
.ClientTemplate("#= kendo.toString(TotalHoursWorked.TotalHours, '00') #:#= kendo.toString(TotalHoursWorked.Minutes, '00') #")
.Filterable(f => f.UI(GridFilterUIRole.NumericTextBox)); ;
columns.Bound(c => c.Status)
.ClientTemplate("# if (Status == 0) { #" +
"<img src='" + Url.Content("~/Content/Images/exclamation16.png") +
"' title='Status: Pending for validation' width='25px' />" +
"# } #" +
"# if (Status == 1) { #" +
"<img src='" + Url.Content("~/Content/Images/approve.png") +
"' title='Status: Consultant approved' width='25px' />" +
"# } #" +
"# if (Status == 2) { #" +
"<img src='" + Url.Content("~/Content/Images/Stamp-blue.png") +
"' title='Status: Approver approved' width='25px' />" +
"# } #" +
"# if (Status == 3) { #" +
"<img src='" + Url.Content("~/Content/Images/Accept.png") +
"' title='Status: Account approved' width='25px' />" +
"# } #"
).Title(Resources.Status).Width(100).HtmlAttributes(new { @class = "center-text" });
columns.Bound(c => c.Status).ClientTemplate(
"#if(Status == 2 || Status == 3){#" +
"<button class='export-btn btn btn-primary'> <span class='glyphicon glyphicon-download-alt'></span> " + Resources.ExportPdf + "</button>" +
"#}#"
).Title(Resources.Actions);
})
.Scrollable()
.Sortable()
.Filterable(filterable => filterable
//.Extra(true)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains(Resources.Contains)
.StartsWith(Resources.StartsWith)
.EndsWith(Resources.EndsWith)
.IsEqualTo(Resources.IsEqualTo)
.IsNotEqualTo(Resources.IsNotEqualTo)
)
.ForDate(d => d.Clear()
.IsEqualTo(Resources.IsEqualTo)
.IsGreaterThan(Resources.IsGreaterThan)
.IsLessThan(Resources.IsLessThan)
.IsNotEqualTo(Resources.IsNotEqualTo)
))
)
.Groupable()
.Resizable(resize => resize.Columns(true))
.Excel(excel => excel
.FileName("Timesheets.xlsx")
).Pdf(pdf => pdf
.FileName("Timesheets.pdf")
)
.Events(e => e.ExcelExport("excelExport"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new List<object> { 10, 20, 50, "All" })
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.Date).Editable(false);
model.Field(p => p.AccountName).Editable(false);
model.Field(p => p.TotalHoursWorked.TotalHours).Editable(false);
model.Field(p => p.ProjectName).Editable(false);
})
.Read(read => read.Action("DownloadTimesheets_Read", "TimeSheet"))
.PageSize(10)
.Group(groups =>
{
groups.Add<ListSortDirection>("Year", ListSortDirection.Descending);
groups.Add<ListSortDirection>("Date", ListSortDirection.Descending);
groups.Add(p => p.AccountName);
})))
额外：一个时间表的状态属性：
public int Status
{
get
{
if (ApprovedByAccount)
return 3;
if (ApprovedByApprover)
return 2;
if (ApprovedByConsultant)
return 1;
return 0;
}
}