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

Subscribe to this post

Tags: Grid

Santhosh Kumar

Asked On April 23, 2019 03:29 PM UTC

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.

Reply | Reply with quote

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.

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.

Reply | Reply with quote

Unable to use date filters in grid view.

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US