Kendo Grid kendoDateRangePicker для кендо-сетки-реагировать-обертки - PullRequest
Новая
       9

Kendo Grid kendoDateRangePicker для кендо-сетки-реагировать-обертки

0 голосов
/ 14 декабря 2018

Я хочу представить что-то вроде kendoDateRangePicker для kendo-grid-реакции-wrapper.Существует kendoDatePicker, который позволяет вам выбирать только одну дату, но не две: 

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

Я решаю аналогичную проблему Как определить фильтр столбцов сетки Kendo между двумя датами? , но длякендо сетки реагируют-обертку.Задача включает в себя настройку, которой нет у «@ progress / kendo-grid-Reaction-wrapper», а именно filterCell в GridColumn из «@ progress / kendo-реагировать-grid»;Используя компоненты кендо-реакции, это может быть легко достигнуто с помощью https://www.telerik.com/kendo-react-ui/components/grid/filtering/, но в оболочке нет свойства filterCell.

1 Ответ

0 голосов
/ 14 декабря 2018

Это можно сделать с помощью оболочки и функции шаблона:

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

Это отфильтрует сеткукогда значение сборщиков изменяется.

Это полный пример

...