用于kendo- Grid -react-wrapper的Kendo网格kendoDateRangePicker

Question

我想为kendo-grid-react-wrapper介绍一些类似kendoDateRangePicker的东西。有一个kendoDatePicker只允许你选择一个日期，而不是两个：

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

我正在为kendo-grid- How to define a Kendo grid Column filter between two dates? -wrapper解决类似的问题。该任务涉及到'@progress/kendo-grid-react- wrapper‘没有的配置，即来自’@progress/ kendo-react - filterCell‘的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