Question

实际上，我的要求是每当用户在过滤器中输入输入时，Kendo网格应该根据输入显示匹配的记录。请帮我解决这个问题。

@(Html.Kendo().Grid(Model).Name("ViewDataGrid")

                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Id).Title(" ID").Width(150);
                                    columns.Bound(c => c.Name).Title(" Name").Width(150);

                                })
                                .HtmlAttributes(new { style = "height: auto; width: 2200px" })
                                .Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row))

                                .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn))
                                .Selectable(selecting => selecting.Enabled(true))                               
                                .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 }))
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(20)
                                .ServerOperation(false)
                                .Events(e => e.Change("call"))


    ))


    function call(e) {

            debugger;

                    var filterlength = e.sender.filter.arguments[0].filters.length;
                    var ds = $("#ViewDataGrid").data("kendoGrid");
                    $filter = new Array();

                    for (var i = 0; i < filterlength; i++) {
                        if (e.sender.filter.arguments[0].filters[i].field == "Id")
                            $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "eq", value: parseInt(e.sender.filter.arguments[0].filters[0].value) });
                        else
                            $filter.push({ field: e.sender.filter.arguments[0].filters[0].field, operator: "contains", value: e.sender.filter.arguments[0].filters[0].value });
                    }

                    $("#ViewDataGrid").data("kendoGrid").dataSource._filter = $filter;
                    $("#ViewDataGrid").data("kendoGrid").dataSource.sync();         



            }

Model.CS

   public int Id { get; set; }

    public string Name { get; set; }

控制器

 public ActionResult Index()
    {
        List<GridData> dataList = new List<GridData>(); 
    GridData data1 = new GridData();
        data1.Id = 9191919;
        data1.Name = "XYZ";           
        dataList.Add(data1);
        return View(dataList);           
    }

这适用于字符串。但它不适用于整数列。

请帮帮我。

Answer 1

您可能需要做的是手动管理Kendo网格数据源过滤器。

我已经完成了这件事，这很容易，这是我的助手功能，看看他们是否以某种方式帮助你：

function addFilter(id, f, op) {
    var filter = $("#" + id).data("kendoGrid").dataSource._filter;

    if (!op) {
        op = "and";
    }

    if (filter == null) {
        filter = { logic: op, filters: new Array() };
    }

    filter.filters.push(f);

    $("#" + id).data("kendoGrid").dataSource._filter = filter;
    return false;
}

function updateGrid(id) {
    console.log("filtering...");
    console.log($("#" + id).data("kendoGrid").dataSource._filter);
    $("#" + id).data("kendoGrid").dataSource.filter($("#" + id).data("kendoGrid").dataSource._filter);
}


function removeFilter(tableId, fieldName) {
    var kendoGrid = $("#" + tableId).data("kendoGrid");
    if (kendoGrid == null) {
        return false;
    }
    var filterConfig = kendoGrid.dataSource._filter;
    if (filterConfig == null) {
        return false;
    }

    var iterate = function (obj) {
        //var toBeRemoved = new Array();
        var newFilters = new Array();

        $.each(obj.filters, function (key, filter) {
            if (filter.hasOwnProperty('filters')) {
                //Composite filter, recursive call
                iterate(filter);
                if (filter.filters.length) {
                    newFilters.push(filter);
                }
            }
            else {
                if (filter.field != fieldName) {
                    newFilters.push(filter);
                }
            }
        });
        obj.filters = newFilters;
    };

    iterate(filterConfig);

    if (!filterConfig.filters.length) {
        filterConfig = null;
    }

    $("#" + tableId).data("kendoGrid").dataSource._filter = filterConfig;
    return false;
}

Answer 2

而不是：

.Filterable(i => i.Mode(GridFilterMode.Menu | GridFilterMode.Row))

尝试使用：

.Filterable(i => i
.Extra(true)
.Operators(operators => operators
    .ForString(str => str.Clear()
    .StartsWith("Starts with")
    .Contains("Contains")
    .DoesNotContain("Doesn't Contain")
    .IsEqualTo("Is equal to")
    .IsNotEqualTo("Is not equal to")
    ))
)

默认GridFilterMode为Menu。所以除非你被要求，否则你不必把那条线放在那里。现在，您正在Menu使用Row和GridFilterMode。通常你只使用一个，除非你出于某种原因要求这样做。

这是您的最终代码的样子。您不必使用更改事件，网格将负责过滤。

@(Html.Kendo().Grid(Model).Name("ViewDataGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.Id).Title(" ID").Width(150);
                                columns.Bound(c => c.Name).Title(" Name").Width(150);

                            })
                            .HtmlAttributes(new { style = "height: auto; width: 2200px" })
                            .Filterable(i => i
                                .Extra(true)
                                .Operators(operators => operators
                                    .ForString(str => str.Clear()
                                        .StartsWith("Starts with")
                                        .Contains("Contains")
                                        .DoesNotContain("Doesn't Contain")
                                        .IsEqualTo("Is equal to")
                                        .IsNotEqualTo("Is not equal to")
                                        ))
                            )

                            .Sortable(s => s.AllowUnsort(false).SortMode(GridSortMode.MultipleColumn))
                            .Selectable(selecting => selecting.Enabled(true))                               
                            .Pageable(r => r.PreviousNext(true).PageSizes(new int[] { 10, 20, 30, 40, 50, 100 }))
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .ServerOperation(false)
                            .Events(e => 
                            {
                                //e.Change("call");
                            })
))

网格/过滤器菜单自定义

Documentation

Kendo Grid Filtering on change Event

2 个答案: