Kendo Grid 可过滤单元格答案

【问题标题】：Kendo Grid Filterable cellKendo Grid 可过滤单元格
【发布时间】：2015-09-21 00:14:00
【问题描述】：

我有一个要求，我必须在剑道网格的可过滤单元格中显示两个下拉列表。这两个下拉列表将过滤剑道网格中的两个不同列。

我的一个想法是有一个模板，它可能是一些类似面板的剑道容器，然后向该容器添加两个下拉菜单。

这甚至可能吗？如果是，如何实现这一目标？

这是我的剑道网格定义。

ctrl.mainGridOptions = {
    dataSource: ctrl.gridDataSource,
    columns: [
                {
                    title: 'Col1-Col2',
                    field: 'Col1',
                    width: 200,
                    template: kendo.template($("#col1").html()),
                    filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
                },
                {
                    field: 'Col3',
                    width: 150,
                    title: 'Col3',
                    template: kendo.template($("#col3").html()),
                    filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
                }
         ]
      }

这是我想要实现的目标的模型。

【问题讨论】：

您在该模板中尝试过什么？我认为您走在正确的道路上，您需要在 dataBound 事件中创建这些下拉列表。无论如何，你的网格看起来很奇怪。那些下拉菜单只会出现在第一行？
我能够获得一个下拉列表，因为它很容易，但无法获得第二个下拉列表。我同意网格看起来很奇怪，但就是这样。是的，下拉菜单应该出现在网格的过滤器单元格中。我认为过滤器单元格不被视为数据行。

标签： kendo-ui kendo-grid

【解决方案1】：

这有几个不同的部分。

首先，如果您想为不同的数据片段设置多个过滤器控件，您应该为每个数据块定义一个列。然后，在第一列放置一个模板，让它显示两列的数据。使用属性选项设置colspan=2。然后，使用第二列的属性选项设置style="display:none"。

第二部分是获取下拉菜单。我通常更喜欢使用values 选项来完成此操作。下面的代码将其用于OrderID 列。另一种选择是您使用的方法，即使用单元格模板。下面的代码在ShipName 列上使用了它。

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "string" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                },
                height: 550,
                filterable: {
                    mode: "row"
                },
                pageable: true,
                columns: [
                {
                    field: "OrderID",
                    width: 150,
                    attributes: {
                        colspan: 2
                    },
                    values: [
                        {text: "10248", value: "one"},
                        {text:"10249", value: "two"}
                    ],
                    template: '#:OrderID# (#:ShipName#)',
                    filterable: {
                        cell: {
                            operator: "eq",
                            showOperators: false
                        }
                    }
                },
                {
                    attributes: {
                        style: "display:none"
                    },
                    field: "ShipName",
                    width: 200,
                    title: "Ship Name",
                    filterable: {
                        cell: {
                            template: function(args) {
                                args.element.kendoDropDownList({
                                    dataSource: args.dataSource,
                                    dataTextField: "ShipName",
                                    dataValueField: "ShipName",
                                    valuePrimitive: true
                                });
                            },
                            operator: "eq",
                            showOperators: false
                        }
                    }
                },
                {
                    field: "Freight",
                    width: 255,
                    filterable: false
                }]
            });
        });
    </script>
</div>

Runnable Demo

【讨论】：

谢谢布雷迪，并为解决方案投票。我会试试这个，看看BU是否可以接受。
再次感谢布雷迪。我添加了attributes 和headerAttributes，它按预期显示了列。

【解决方案2】：

具有自定义选项列的 Kendo Grid 可过滤单元格，并且通过使用此解决方案，它还可以覆盖通用过滤器设置，以防特定列要求。 ASP.NET MVC C#。

columns.Bound(c => c.columnName)
    .Format("{0}%")
    .Filterable(ftb => ftb
        .Cell(cell => cell.ShowOperators(true))
        .Extra(false)
        .Operators(op => op
            .ForNumber(fn => fn
                .Clear()
                .IsEqualTo(CommonResource.GridFilter_IsEqualTo)
            )
        )
    )
    .Title("Column Name");

【讨论】：