Kendo Grid 可过滤单元格

Question

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

我的一个想法是使用模板，该模板可能是一些剑道容器，例如某些面板，然后向该容器添加两个下拉菜单。

这可能吗？如果是的话如何实现这一点？

这是我的剑道网格定义。

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

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

Answer 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>

可运行演示

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

Answer 3

您有一个列绑定到包含 JSON 对象的字段，并且您正在使用模板来显示特定属性或来自 JSON 的计算值。但是，默认过滤不起作用，因为过滤器查找整个对象而不是显示的值。

解决方案

要进行过滤：

1. 定义自定义

   valueGetter

   函数来提取字段值。
2. 使用

   filterable.cell

   选项为该列提供自定义过滤器逻辑。

实施

这是一个例子：

JSON 数据示例

public gridData = [
  { id: 1, name: { firstName: 'John', lastName: 'Doe' }, age: 30 },
  { id: 2, name: { firstName: 'Jane', lastName: 'Smith' }, age: 25 },
];

剑道网格配置

<kendo-grid [data]="gridData" [filterable]="true">
  <!-- Other columns -->
  
  <kendo-grid-column title="Full Name" [filterable]="true">
    <ng-template kendoGridCellTemplate let-dataItem>
      {{ dataItem.name.firstName + ' ' + dataItem.name.lastName }}
    </ng-template>
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <input kendoTextBox
             [(ngModel)]="columnFilterValue"
             (ngModelChange)="onFilterChange(column, filter)"
             placeholder="Filter by full name"
      />
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

组件逻辑

import { Component } from '@angular/core';
import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `<kendo-grid [data]="filteredData" [filter]="filter"> </kendo-grid>`,
})
export class AppComponent {
  public gridData = [
    { id: 1, name: { firstName: 'John', lastName: 'Doe' }, age: 30 },
    { id: 2, name: { firstName: 'Jane', lastName: 'Smith' }, age: 25 },
  ];
  public filter: CompositeFilterDescriptor = { logic: 'and', filters: [] };
  public filteredData = this.gridData;

  public columnFilterValue: string = '';

  onFilterChange(column: any, filter: CompositeFilterDescriptor): void {
    const filterValue = this.columnFilterValue.toLowerCase();
    this.filter = {
      logic: 'and',
      filters: [
        {
          field: 'name',
          operator: (item: any) => {
            const fullName = item.name.firstName + ' ' + item.name.lastName;
            return fullName.toLowerCase().includes(filterValue);
          },
        } as FilterDescriptor,
      ],
    };

    // Filter the data
    this.filteredData = this.gridData.filter((item) =>
      this.filter.filters[0].operator(item)
    );
  }
}