Question

我为我们的时间表制作了一个KENDO网格，并且有一个列＆＃34; Status＆＃34;。我制作了一个自定义下拉过滤器，用于过滤contractstatus [PendingValidation，ConsultantApproved，ApproverApproved，AccountApproved]。这些状态的值是0,1,2和3.我想要一个DropDown，它显示完整的状态名称，但过滤值。

一切顺利，使用资源显示文字，但点击＆＃39;过滤后不会发生任何事情。

在我制作自定义下拉列表之前，使用了一个numericTextBox来显示＆＃34; 1,2,3和4＆＃34;而不是完整的状态名称。过滤工作完美无缺。

我写的这个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);
        })))

Extra：时间表的状态属性：

    public int Status 
    { 
        get 
        {
            if (ApprovedByAccount)
                return 3;
            if (ApprovedByApprover)
                return 2;
            if (ApprovedByConsultant)
                return 1;

            return 0;
        } 
    }

Answer 1

无需做所有这些。 Kendo UI有一种内置方式来处理下拉过滤器的自定义：

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Kendo Grid的自定义DropDownList过滤器无法正常工作

1 个答案: