Question

我有一个充满了一些JSON数据的kendo网格，在网格的过滤器窗口中，您可以选择条件类型，然后填充条件值文本框，然后根据您的选择过滤网格。

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

我读了Brace expansion这就像我想要的那样，但它在代码中添加了这些值，我应该通知你，每次这些字段都不一样，所以我不能通过硬编码在过滤器中写出这些值。

甚至像an article这样的东西与我想要的非常相似（过滤条件为＆＃39; City＆＃39; Field），但是它使用不同的来源来获得条件 - 下降值，而不是网格列本身。

另外，我不能使用JSON数据，我必须使用来自kendo网格的信息。

提前感谢。

Answer 1

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

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

 <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--"
                })
            };

        });

Answer 2

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

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");
    })
)

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

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

2 个答案: