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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Unable to use date filters in grid view.

Thread ID:

Created:

Updated:

Platform:

Replies:

144179 Apr 23,2019 03:29 PM UTC Apr 24,2019 09:46 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Santhosh Kumar
Asked On April 23, 2019 03:29 PM UTC

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.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon