Kendo Grid 可过滤单元格

Posted 2023-05-07

【中文标题】Kendo Grid 可过滤单元格

【英文标题】：Kendo Grid Filterable cell

【发布时间】：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 事件中创建这些下拉列表。无论如何，你的网格看起来很奇怪。那些下拉菜单只会出现在第一行？

我能够获得一个下拉列表，因为它很容易，但无法获得第二个下拉列表。我同意网格看起来很奇怪，但就是这样。是的，下拉菜单应该出现在网格的过滤器单元格中。我认为过滤器单元格不被视为数据行。

【参考方案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");