1

我试图让 kendoui 网格支持使用下拉列表作为过滤器的过滤。我希望用户能够从所有可用选项的列表中进行选择，而不是要求他们手动输入过滤器。

我有一个这样的共享数据源：

var transport = {
    read: {
        url: "/api/account/changes",
        type: "POST",
        dataType: "json"
    }
};

此方法返回一个如下所示的对象：

public class Response {
  public IEnumerable Data { get;set; }
  public int Count { get; set; }
  public IEnumerable Users { get; set; }
}

然后，我将两个数据源绑定到一个传输：

var masterDataSource = new kendo.data.DataSource({
    transport: transport,
    schema: {
        data: "Data",
        total: "Count",
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                User: { type: "string" },
                // other columns
                Value: { type: "string" }
            }
        }
    },
    pageSize: 20,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
});

var usersDataSource = new kendo.data.DataSource({
    transport: transport,
    schema: {
        data: "Users"
    }
});

我的网格绑定到 masterDataSource：

$("#grid").kendoGrid({
    dataSource: masterDataSource,
    height: 800,
    navigatable: true,
    resizable: true,
    scrollable: true,
    sortable: {
        mode: "single",
        allowUnsort: false
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: "Starts with",
                eq: "Is equal to",
                neq: "Is not equal to"
            },
            date: {
                greaterthan: "Greater than",
                lessthan: "Less than"
            }
        }
    },
    pageable: true,
    columns: [
        {
            field: "User",
            title: "User",
            width: 130,
            filterable: {
                ui: userFilter
            }
        },
        // other columns
        {
            field: "Value",
            title: "Value",
            filterable: false,
            width: 70
        }
    ]
});

然后我定义了一个函数来表示过滤器：

function userFilter(element) {
    console.log("setting up user filter");
    element.kendoDropDownList({
        dataSource: usersDataSource,
        optionLabel: "--Select One--"
    });
    console.log("set up user filter");
}

但是，我的 userFilter 函数从未被调用，并且我得到了通用列过滤，而不是下拉列表过滤器。这种布局看起来很像http ://demos.kendoui.c​​om/web/grid/filter-menu-customization.html 上的过滤示例，但我似乎无法让下拉列表像他们的那样工作。

感谢您在这方面的帮助。

4

1 回答 1

0

问题是您永远不会调用您的 userFilter 函数。在您的可过滤属性下，您需要添加一个 ui 属性并将其设置为您希望调用的函数。像这样：

filterable: { ui: userFilter }

希望有帮助。

于 2013-11-18T18:08:46.127 回答