javascript - Kendo Grid kendo DateRangePicker for kendo-grid-react-wrapper

Question

我想为 kendo-grid-react-wrapper 引入类似 kendoDateRangePicker 的东西。有 kendoDatePicker 允许您只选择一个日期而不是两个:

filterable : {
 cell: {
   template: function (args) {
       args.element.kendoDatePicker({
       });
   },
   showOperators: true,
   enabled: true                        
 },         
}

我正在解决类似的问题 How to define a Kendo grid Column filter between two dates?但对于 kendo-grid-react-wrapper 来说。该任务涉及'@progress/kendo-grid-react-wrapper'没有的配置，即来自'@progress/kendo-react-grid'的GridColumn中的filterCell；使用kendo-react组件可以通过https://www.telerik.com/kendo-react-ui/components/grid/filtering/轻松实现但包装器中没有filterCell属性。

Answer 1

这可以通过包装器和模板函数来完成:

1) 列:

        <GridColumn field="OrderDate" title="Order Date" format="{0: yyyy-MM-dd}" filterable={this.filterableDates} />

2) 可过滤:

    this.filterableDates = {
  cell: {
    template: function (args) {
      let valueOne = null;
      let valueTwo = null;
      let grid = $('.k-grid').data('kendoGrid')
      let parent = $(args.element).parent()
      $(parent).append("<input id='second'>")
      args.element.kendoDatePicker({
        change: function (e) {
          valueOne = e.sender.value()
          grid.dataSource.filter({
            logic: "and",
            filters: [
              { field: "OrderDate", operator: "ge", value: valueOne },
              { field: "OrderDate", operator: "le", value: valueTwo }
            ]
          })
        }
      });
      $("#second").kendoDatePicker({
        change: function (e) {
          valueTwo = e.sender.value()
          grid.dataSource.filter({
            logic: "and",
            filters: [
              { field: "OrderDate", operator: "ge", value: valueOne },
              { field: "OrderDate", operator: "le", value: valueTwo }
            ]
          })
        }
      });
    },
    showOperators: true,
    enabled: true
  },
}

当选择器的值更改时，这将过滤网格。

这是full example