用 kendo 中它自己的值填充列的过滤器值

Question

我有一个 kendo 网格，其中填充了一些 JSON 数据，在过滤器 window 网格中，您可以 select 键入一个条件，然后填写条件值文本框，然后根据您的 selection.

过滤网格

现在我有一列只填充了四五个不同的值。我想让过滤器部分的条件值字段成为一个下拉列表，而不是将这些值写入 select 它们，我想从列表中选择它们。（我的意思是在网格列的过滤器部分，而不是列本身。）

我阅读了 an article 这正是我想要的，但它在代码中添加了这些值，我应该通知你，这些字段每次都不相同，所以我不能通过硬编码将这些值写入过滤器。

甚至 this one 之类的东西与我想要的非常相似（为 'City' 字段创建的过滤条件），但它使用不同的来源来获取条件下拉值，而不是网格专栏本身。

此外，我不能使用JSON数据，我必须使用kendo网格中的信息。

提前致谢。

Answer 1

我喜欢这样做的一种方法是创建我的值列表并将该列表添加到 ViewData，然后将其传递给视图。

public IEnumerable<ModelName> GetTypes()
{
    //Get data from the table you store your values in.
    return dbContext.TypesTable.OrderBy(f => f.Name);
}

public ActionResult YourView()
{
    IEnumerable<ModelName> types = GetTypes();
    ViewData["MyTypes"] = types;
    return View();
}

然后在您的网格中添加一个 ForeignKey 列并将其设置为查看您之前设置的 ViewData。

@(Html.Kendo().Grid<ViewModelName>()
    .Name("GridName")
    .Columns(columns =>
    {
        columns.ForeignKey(c => c.RecipientType, (System.Collections.IEnumerable)ViewData["MyTypes"], "TypeId", "Name");
    })
)

此列现在将显示当前记录的值的名称。然后，当您编辑或添加记录时，此字段将显示为包含所有可能值的下拉列表。

Answer 2

我终于找到了解决问题的方法...

将网格绑定到数据源后，通过在网格的数据源上设置循环，我将网格的一列数据推送到一个数组，然后在该列上设置过滤器到阵列。

 <script type="text/javascript">

        var arrayName = [];

        $(function () {
            var productsDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "api/products",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET'
                    },
                    parameterMap: function (options) {
                        return kendo.stringify(options);
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            "Id": { type: "number" }, 
                            "Name": { type: "string" },
                            "IsAvailable": { type: "boolean" },
                            "Price": { type: "number" }
                        }
                    }
                },
                error: function (e) {
                    alert(e.errorThrown);
                },
                sort: { field: "Id", dir: "desc" },
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

            productsDataSource.read(); 

            $("#report-grid").kendoGrid({

                dataSource: productsDataSource,
                dataBound:
                function (e) {
                    var data = $("#report-grid").data("kendoGrid").dataSource._data;
                    for (i = 0; i < data.length; i++) {
                        arrayName.push(data[i].Name);
                    }
                }, 
                autoBind: false,
                scrollable: false,
                pageable: true,
                sortable: true,
                filterable: { extra: false },
                reorderable: true,
                columnMenu: true,
                columns: [
                    { field: "Id", title: "No", width: "130px" },
                    { field: "Name", title: "ProductName", filterable: { ui: SystemFilter } },
                    {
                        field: "IsAvailable", title: "Available",
                        template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
                    },
                    { field: "Price", title: "Price", format: "{0:c}" }
                ]
            });

            function SystemFilter(element) {
                element.kendoDropDownList({
                    dataSource: arrayName,
                    optionLabel: "--Select Name--"
                })
            };

        });

用 kendo 中它自己的值填充列的过滤器值

fill the filter values of a column by it's own values in kendo

filtering

datagridviewcolumn

kendo-grid