Date column filter getting stuck

Question

Hi all,I'm using 'filterSettings' to filter grid columns. But in date type column is getting stuck when open the filter popup window. Following code for your reference.-- TS --this.dateFormatOptions = { type: 'date', format: 'MM/dd/yyyy' };this.gridFilterOptions = { type: 'Excel' };-- HTML --[allowFiltering]='true' [filterSettings]='gridFilterOptions' -- Screen shot --

Prasanna Kumar Viswanathan · Answer

Hi Neo , 
 
Greetings from Syncfusion support 
 
Query : Date column filter getting stuck. 
 
Based on your attached screenshot we suspect that you are binding remote data to the EJ2 Grid. We checked in our sample by binding remote data, but we did not face the mentioned issue when we filter the date column.  
 
To find out the root cause of an issue we need the following details, 
 
1. Have you bind remote data to the EJ2 Grid? If yes, please share the adaptor details. 
 
2. Share the complete grid code example. 
 
3. What type of data(Date object or string) that you binded to the Date column? 
 
Regards 
Prasanna Kumar N.S.V

Neo · Answer

Hi Neo ,

Greetings from Syncfusion support

Query : Date column filter getting stuck.

Based on your attached screenshot we suspect that you are binding remote data to the EJ2 Grid. We checked in our sample by binding remote data, but we did not face the mentioned issue when we filter the date column.

To find out the root cause of an issue we need the following details,

1. Have you bind remote data to the EJ2 Grid? If yes, please share the adaptor details.

2. Share the complete grid code example.

3. What type of data(Date object or string) that you binded to the Date column?

Regards

Prasanna Kumar N.S.V

Hi,

Please refer my details below,

1. Yes. I'm using Rxjs for remote date bind. (If current data binding is wrong please advise the correct way)

-- DataService.ts --

getData(id: number): Observable<dataModel[]> {
    const request = {
      Id: id
    }

    return this.httpClient.post<dataModel[]>(
      `http://localhost:5520/api/data/get-data`,
      request, { headers: this.httpHeaders });
  }

-- MyComponent.ts --

constructor(
    private dataService: DataService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    @Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { }

ngOnInit() {

    this.loadData(5);
  }

private loadData(id: number) {

    this.dataService.getData(id).subscribe(
      (response) => {

        this.gridData = response;
        this.gridData.gridLines = "Both";
      },
      errorResponse => {
        console.log("Service error", errorResponse);
      });
  }

2.

<ejs-grid #grid [dataSource]='gridData' [contextMenuItems]="contextMenuItems"
                [groupSettings]='groupSettings' [filterSettings]='filterOptions'
                (contextMenuClick)="contextMenuClicked($event)" (rowSelected)="rowSelected($event)"
                (rowDeselected)="rowDeselected($event)" (dataBound)="gridDataBound()" [allowSorting]="true"
                [allowReordering]='true' [allowGrouping]='true' [allowFiltering]='true' [allowSelection]="true"
                height="100%" rowHeight=25>
                <e-columns>
                  
                  <!-- Other columns -->
                  <e-column field='lastUpdatedDatetime' width='75' headerText='Modified on' textAlign='center'
                    type='date' [format]='dateFormatOptions'>
                  </e-column>

                </e-columns>
              </ejs-grid>

3. From Web API property implemented as,

public DateTime? LastUpdatedDatetime { get; set; }

Angular side,

lastUpdatedDatetime: Date | null;

3. From Web API property implemented as,public DateTime? LastUpdatedDatetime { get; set; }Angular side,lastUpdatedDatetime: Date | null;

Prasanna Kumar Viswanathan · Answer

Hi Neo, 
 
Thanks for the update. 
 
Query : Date filter column getting stuck. 
 
We have analyzed your query and we suspect that this issue was made due to the date value append to filter as “string” type. So we suggest you to convert that from string type to date type before rendered in grid filter. Please refer the below code snippet and sample for more reference. 
 




Order.service.ts 

   return this.http 
      .get(`${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`) 
      .pipe(map((response: any) => response.json())) 
      .pipe(map((response: any) => { 
        return state.dataSource === undefined ? (<DataResult>{ 
          result: DataUtil.parse.parseJson(response['value']), 
          count: parseInt(response['@odata.count'], 10), 
        }) : DataUtil.parse.parseJson(response['value']);             // convert from string type 
      })) 
      .pipe(map((data: any) => data)); 
  } 
} 
 
Sample : https://stackblitz.com/edit/angular-ntgj93-2ncqbv?file=async-pipe.component.ts 
 
Please get back to us if you need further assistance 
 
Regards 
Prasanna Kumar N.S.V