We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to use date filters in grid view.

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.

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.

1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team April 24, 2019 09:46 AM UTC

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. 
 

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



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

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon