Datepicker on Excel filter

[Edson Rodríguez]

Hi, 

I'm using a grid component with excel filter and I wonder if is possible to set the filter of the column date like the first image. Wiith the format dd/mm/yyy

The second image is what I actually have.

Thanks for your attention

[Sujith Kumar Rajkumar]

Hi Edson, 

Greetings from Syncfusion support. 

We checked your query and would like to let you know that for date columns you can use the date picker to select values in the Excel filter type from the Date filters option as shown in below image, 

 

On selecting the date filter type, you can filter values using the date range picker control as shown in below image, 

 

This can be checked in the below online demo sample link, 

Grid Filtering: https://ej2.syncfusion.com/angular/demos/#/material/grid/filter-menu  

If you wish to directly render the date range control for filtering date values then we suggest you to set ‘Menu’ filter type for the required date column alone using the columns filter type property. This requirement is documented in the below help documentation link, 

Enable different filter for a column: https://ej2.syncfusion.com/angular/documentation/grid/filtering/#enable-different-filter-for-a-column 

Sample based on this for your reference, 

Sample: https://stackblitz.com/edit/angular-2mz7ww?file=app.component.ts 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R  

[Edson Rodríguez]

Hi,

I added the filter and format options in the column but the format is not responding 

also I get this error

I don´t know if I need to add something in order to work with format in a column

[Sujith Kumar Rajkumar]

Hi Edson, 

 

We checked your reported problem but unfortunately were unable to reproduce it from our end as the custom column filter was working properly as you can see in the sample shared in our previous update. 

 

Can you please share us the following additional information to validate further on this case, 

 

• Please share us how you have set format for the date column.
• Syncfusion package version used.
• Grid code file.
• If possible share us a simple sample to replicate the problem or try reproducing it in the sample shared in our previous update. This would be helpful to narrow down the problem scenario and provide a solution based on that.

 

Note: If you are using older Syncfusion packages, we suggest you to update them to the latest version and check if the problem is resolved. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/#update-syncfusion-npm-package 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Edson Rodríguez]

Hi,

I updated my Syncfusion version and the problem is not solved yet, when I add a format to the colum, the table stop showing data. I dont know if it is because I set a filter on the date column when the page is loaded, I attach my html and js code.

Thanks.

Attachment: code_528f61c8.zip

[Sujith Kumar Rajkumar]

Hi Edson, 

We checked the shared code snippets from which we could see that separate filter type was not set for any columns(As only ‘Excel’ filter type was set for the Grid). So can you please confirm us the following details before proceeding further so that we can identify your exact scenario, 

• Are you facing issue on setting column format alone now? If so is the same issue as reported earlier thrown for this case also?
• On applying initial filter if the filter value is not present in the column then it will display no data in the Grid(As filter criteria is not met in any cell). For this case you need to clear filter in the Grid to display all the values back as shown in below image,

 

 

 

So can you please confirm whether the initial filter value is present in the data bound to the Grid. 

Based on the details shared we will check and provide the further updates. 

Regards, 

Sujith R 

[Edson Rodríguez]

Hi,

Yes, Im facing the same problem. When there is not matching, the table shows nothing, the problem  is although there is matching data the table shows nothing once I add the calendar type.

Wheter I define the column of type date or with the Menu filter, the problem is that I cant set the date format and the table stops showing data when I add the formart.

I also tried to create another table without the preset value and the same problem happens.

[Sujith Kumar Rajkumar]

Hi Edson, 

 

Thanks for sharing the details. 

 

Query – 1: “When there is not matching, the table shows nothing, the problem  is although there is matching data the table shows nothing once I add the calendar type.” 

 

We checked this query and would like to let you know that for initial filtering of date values, you need to provide the value as in the same format that is bound to the Grid’s dataSource. For e.g., Consider the date value – “1996-07-04T10:10:00.000Z” is present in the Grid data source for which the column format is set as “ddMMyyyy”. So for initial filtering you need to provide this date value so as to filter it. 

 

this.filterSettings = { 

        ignoreAccent: true, 

        type: "Excel", 

        columns: [{ field: 'OrderDate', matchCase: false, operator: 'equal', predicate: 'or', value: "1996-07-04T10:10:00.000Z" }] 

} 

 

We have prepared a sample based on this for your reference which you can find below, 

 

Sample: https://stackblitz.com/edit/angular-2mz7ww-rqybsw?file=app.component.ts 

 

So please make sure to provide the date value in the same format as present in the underlying data source for the initial filtering. 

 

Query -2 : “Whether I define the column of type date or with the Menu filter, the problem is that i can’t set the date format and the table stops showing data when I add the format. I also tried to create another table without the preset value and the same problem happens.” 

 

We could not reproduce this problem with the format that you have mentioned in your shared code snippet – “ddMMyyyy”. Please check below sample for reference, 

 

Sample: https://stackblitz.com/edit/angular-2mz7ww-5rcpa4?file=app.component.html 

 

Could you please check and let us know if you are able to reproduce your problem scenario in the above shared sample. If not then please share us a sample date value that is bound in the Grid’s data source and let us know if the problem is reproduced with this format – “ddMMyyyy” or any other format. If you have used custom date format then we suggest you to set it using the columns format property as demonstrated in the below code snippet, 

 

<e-column field='OrderDate' [format]='formatOptions' headerText='Order Date' textAlign='Right' width=120></e-column> 

 

export class AppComponent implements OnInit { 

 

    public formatOptions: object; 

 

    ngOnInit(): void { 

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

    } 

} 

 

More details on this can be checked in the below help documentation link, 

 

Column date formatting: https://ej2.syncfusion.com/angular/documentation/grid/columns/#date-formatting 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Edson Rodríguez]

Hi,

Good news; I already managed to use the date picker in the date column, but now I want to edit the format.

By default the format is Mdy, and I want that when I select a date in the calendar, the format be specifically dd/MM/yyyy. 

What now happens is that I set the format as I need but looks like the table by default always have the same format Mdy, so the table shows nothing when I selct a date with data because the format is wrong when.

For example, if I selct August 10 (10/08/2020), the calendar takes me to October 8 (08/10/2020) because of the format, even though I defined the format dd/MM/yyyy in the formatoptions like the examples you provided me.

Thanks.

[Sujith Kumar Rajkumar]

Hi Edson, 

 

We checked your query and based on that suspect you are trying to set different formats in the date column and the filter menu. The format that is set in the columns format property will be set for both the columns and used for filter action. This is its default behavior. Please check this in the below sample, 

 

Sample: https://stackblitz.com/edit/angular-2mz7ww-ui94u2?file=app.component.ts 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R