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；使用剑道反应组件，可以通过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

Kendo网格kendoDateRangePicker用于kendo-grid-react-wrapper

1 个答案: