Unable to use date filters in grid view.

[Santhosh Kumar]

Hi

I am using plain grid to show data.

I am getting data  from API but i am unable to filter data for Date fields.(Start date column and End date column)

Please see the below stackblitz link Hope you will respond ASAP.

And Please let me know how to make the grid as responsive grid.

Grid Link

for responsiveness please resize the window and check.

I have checked with below scenario.

Select the Greater than option and entered 28/02/2019 date but in side the grid showing "no records to display"

Thanks

Santhosh Kumar K.

[Thavasianand Sankaranarayanan]

Hi Santhosh Kumar, 

Greetings from the Syncfusion support, 

Query #1: How to make the grid as responsive grid? 

By default, EJ2 Grid is responsive nature and work very well on different devices. Browser scroller is provided to make the grid more readable and hide the columns approach based on browser width. Please refer to the below blog for responsive grid. 

 

https://blog.syncfusion.com/post/essential-js-2-effective-ways-to-utilize-responsiveness-in-the-angular-grid.aspx 

Query #2: Menu filtering is returned “No records to display”  while filter the date columns? 

We found that cause of the defect as you have bind the grid datasource using JSON type value alone. We suggest you to use the below way to resolve the reported defect. Please refer the code example and modified sample link for more information. 

[app.component.ts] 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { DataUtil, DataManager } from "@syncfusion/ej2-data"; 

import { FilterService, GridComponent } from '@syncfusion/ej2-angular-grids'; 

 

 

var parseData = JSON.stringify( 

   

    [ 

     .     .      .    .  

]) 

// Iterate value type from JSON stringify(parseData)    

var orderDataSource = JSON.parse(parseData, (field: any, value: any) => { 

    let dupValue: any = value; 

    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) { 

        let arr: any = dupValue.split(/[^0-9]/); 

        let arg: any = parseInt(arr[4], 10); 

        let arg1: any = parseInt(arr[5], 10); 

 

        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), arg, arg1); 

    } 

    return value; 

}); 

 

 

@Component({ 

    selector: 'my-app', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'], 

  providers: [FilterService] 

}) 

ngOnInit() { 

        this.data = orderDataSource; 

        this.formatoptions = { type: 'date', format: 'dd/MM/yyyy' }; 

        this.filterSettings = { type: "Menu" } 

    } 

Sample link: https://stackblitz.com/edit/angular-syncfusiongrid-date-filter-16zzty?file=src%2Fapp%2Fapp.component.ts 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S.