0
J'ai créé une grille KENDO pour nos feuilles de temps, et il y a une colonne "Status". J'ai créé un filtre déroulant personnalisé qui filtre sur contractstatus [PendingValidation, ConsultantApproved, ApproverApproved, AccountApproved]. Les valeurs pour ces statuts sont 0,1,2 et 3. Je veux un DropDown qui affiche les noms de statut complets, mais les filtres sur la valeur.Le filtre DropDownList personnalisé pour la grille de Kendo ne fonctionne pas correctement
Tout va bien, le texte est affiché par l'utilisation de ressources, sauf que rien ne se passe après avoir cliqué sur 'Filtre'. Avant de faire la liste déroulante personnalisée, un numericTextBox a été utilisé indiquant "1, 2, 3 et 4" au lieu des noms d'état complets. Le filtrage a fonctionné sans faille alors.
Ce JQuery je l'ai écrit à personnaliser:
///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
C'est la grille:
@(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);
})))
supplémentaire: la propriété d'état d'une feuille de temps:
public int Status
{
get
{
if (ApprovedByAccount)
return 3;
if (ApprovedByApprover)
return 2;
if (ApprovedByConsultant)
return 1;
return 0;
}
}