Server side filter for Date Range instead client side

[Kumar]

Hi Team,

Originally we have implemented the client side filter using the Date Range for date column. Now the requirement got changed and we need to fetch it from server. But the problem is API call returns the data based on start and end date selected but the UI is not rendering the same. UI is rendering the data if we select only the start date.
We have implemented the date range filter by referring this page https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange. Can you please help to render the data by ignoring the client side filter. we are using the CompositeFilterDescriptor for filter the kendo grid data from server. still the client side filter is working for text/string filter but rendering the final data returned by API.

import { Component, Input } from "@angular/core";
import {
  BaseFilterCellComponent,
  FilterService,
} from "@progress/kendo-angular-grid";
import { FilterDescriptor } from "@progress/kendo-data-query";
import { SVGIcon, xIcon } from "@progress/kendo-svg-icons";

/**
 * NOTE: Interface declaration here is for demo compilation purposes only!
 * In the usual case include it as an import from the data query package:
  */
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: "date-range-filter-cell",
  styles: [
    `
      kendo-daterange > kendo-dateinput.range-filter {
        display: inline-block;
      }
      .k-button {
        margin-left: 5px;
      }
    `,
  ],
  template: `
    <kendo-daterange>
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeStartInput
        [value]="start"
        (valueChange)="filterRange($event, end)"
        style="width:120px"
      >
      </kendo-dateinput>
      -
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeEndInput
        [value]="end"
        (valueChange)="filterRange(start, $event)"
        style="width:120px"
      >
      </kendo-dateinput><button
      kendoButton
      [svgIcon]="xIcon"
      title="Clear"
      (click)="clearFilter()"
    ></button>
    </kendo-daterange>
  `,
})
export class DateRangeFilterCellComponent extends BaseFilterCellComponent {
  // @Input() public filter: CompositeFilterDescriptor;

  @Input()
  public field: string;

  public xIcon: SVGIcon = xIcon;

  // constructor(filterService: FilterService) {
  //   super(filterService);
  // }

  public get start(): Date {
    const first = this.findByOperator("gte");

    return (first || <FilterDescriptor>{}).value;
  }

  public get end(): Date {
    const end = this.findByOperator("lte");
    return (end || <FilterDescriptor>{}).value;
  }

  // public get hasFilter(): boolean {
  //   return this.filtersByField(this.field).length > 0;
  // }

  public clearFilter(): void {
    this.filterService.filter(this.removeFilter(this.field));
  }

  public filterRange(start: Date, end: Date): void {
    this.filter = this.removeFilter(this.field);

    const filters = [];

    if (start) {
      filters.push({
        field: this.field,
        operator: "gte",
        value: start,
      });
    }

    if (end) {
     let enddate = new Date(end);

      filters.push({
        field: this.field,
        operator: "lte",
        value: end.setDate(enddate.getDate() + 1),
      });
    }

    const root = this.filter || {
      logic: "and",
      filters: [],
    };

    if (filters.length) {
      root.filters.push(...filters);
    }

    this.filterService.filter(root);
  }

  private findByOperator(op: string): FilterDescriptor {
    return this.filtersByField(this.field).filter(
      ({ operator }) => operator === op
    )[0];
  }
}