Question

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

我曾经想过有一个模板可能会像某个面板一样使用一些kendo容器，然后在该容器中添加两个下拉列表。

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

这是我的剑道网格定义。

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 } }
                }
         ]
      }

这是我想要实现的模型。

enter image description here

Answer 1

这有几个不同的部分。

首先，如果要为不同的数据片段设置多个过滤器控件，则应为每个数据块定义一列。然后，在第一列上放置一个模板，让它显示两列的数据。使用attributes选项设置colspan = 2。然后，使用第二列上的attributes选项设置style =＆＃34; display：none＆＃34;。

第二部分是获得下拉菜单。我通常更喜欢使用＆＃34;值＆＃34;完成此任务的选项。下面的代码将此用于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

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

Kendo Grid Filterable单元格

2 个答案: