Igx-Grid: Convert datatypes – string to date

Hello,

I have an igx-grid with a column with dates. When I try to filter the columns with the dates nothing changes. Maybe it's because I got the data from SQL database in a string format. Is it possible to display those dates from the original string format as a date format in the igx grid?

I read a similar question in the forum: https://ko.infragistics.com/community/forums/f/ignite-ui-for-angular/121906/custom-string-date-filter

Since the question was posted over 2 years ago, I would like to know if this problem is already solved and if there is a solution to it.

I tried to convert the string into a date:

      for (let d = 0; d < this.myData.length; d++) {
        let currentDate= this.myData[d].orderDate
        let day = currentDate.substring(0, 2)
        let month = currentDate.substring(3, 5)
        let year = currentDate.substring(6, 10)

        this.myData[d].orderDate= month + "." + day + "." + year
        let convertedDate= new Date(year + '-' + month + '-' + day)
        this.myData[d].orderDate= convertedDate
      }

This is my igx-column:

And here is my [pipeArgs]:

  public dateOptions = {
    format: 'mediumDate',
    timezone: 'UTC+0'
  };
  public formatDateOptions = this.dateOptions;

Thank you in advance.

Hello Silvia,

Thank you for posting into our community!

I have been looking into your question and I have prepared a small sample trying to reproduce the described behavior by setting the dates of a few records in the data source to strings and filtering the respective date column. However, as I was not sure how the filtering is applied on your side and what is the format of the date values, I have tested this by using a “yyyy-MM-dd” format for the dates and setting the filter mode to “quickFilter” and then to “excelStyleFilter”.

On my side, everything works as expected and the dates are displayed and filtered successfully.

Having this in mind, could you please clarify how is the filtering applied on your side? Is the filter mode set to “quickFilter” or “excelStyleFilter”? Additionally, could you please provide a small sample that demonstrates the behavior on your side with some sample data that shows the format of the date values?

Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful in providing you with a solution as soon as possible.

Here could be found my sample for your reference. Please test it on your side and let me know how it behaves.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Thank you very much. Your sample is exactly what I need. I have one more question.

I am using excelStyleFilter as filterMode. Is it possible to display the dates in reverse order? I mean, e.g. December 2021 at the top of the list and January 2020 at the bottom. Now I have the months of 2020 at the top and the months of 2022 at the end.

Here is the modified sample: https://stackblitz.com/edit/angular-khqx8m-wtrokz?file=src%2Fapp%2Fdata%2Fdata.ts,src%2Fapp%2Figx-sample%2Figx-sample.component.ts,src%2Fapp%2Figx-sample%2Figx-sample.component.html

I hope you can help me. Thank you.

Hello Silvia,

Thank you for following up!

I am glad that you find my sample helpful. Additionally, after looking into your additional question I believe that you will find the sample that I have prepared for you quite helpful.

In the attached sample, I am using the built-in Excel style filtering components when defining the Excel Style Filtering in order to reference the IgxExcelStyleSearchComponent where the list containing the values is positioned. Then, in the handler for the listDataLoaded event of the IgxGridExcelStyleFilteringComponent I am sorting the values in descending order.

Here could be found my sample for your reference. Please test it on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Hello Riva, many thanks for the amazing example. Is it possible to use those date formats with the Grid State Persistence? I save the user's filters, sorting etc. but when I reload the page, then the date format is also changed.

Here is an example:
https://stackblitz.com/edit/angular-khqx8m-tyya7h?file=src%2Fapp%2Figx-sample%2Figx-sample.component.ts,src%2Fapp%2Figx-sample%2Figx-sample.component.html

Hello Silvia,

After looking into your question, what I could say, as mentioned in our Restoring columns section here, is that IgxGridState will not persist columns templates, column formatters, etc. by default and restoring any of these can be achieved with code on application level. This could be achieved by using the IgxGrid’s columnInit event and setting the pipeArgs property to the respective column.

This could look similar like the following:

    
    
        ...

 

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'RegistererDate') {
        column.pipeArgs = this.formatDateOptions;
    }
}

 

Here could be found a modified sample demonstrating this approach.

Please test it on your side and let me know if you need any further assistance regarding this matter.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Hello Riva,

I also have action buttons for editing a selected cell. Is it possible to save this feature in the state?

    
      
        
{{cell.value}}
        
          edit
        
      
    

Example: https://stackblitz.com/edit/angular-khqx8m-wrhrmu?file=src/app/igx-sample/igx-sample.component.html

When I save the user's preferences for sorting, filter etc. and reload the page, then the action buttons disappear.

Hello Silvia,

Thank you for following up!

After reviewing your question what I could say is that according to our support policy we handle a single issue per forum thread and since the initial theme is regarding formatting and displaying date values, I would recommend referring to our State Persistence topic here and specifically the restoring columns section, where could be found detailed information and code snippets demonstrating how such behavior could be achieved.

However, in case you need any further assistance regarding this matter, my suggestion is to create a separate thread with your new question. This is for better consistency and history tracking.

Thank you for your cooperation.

Regards,
Riva Ivanova
Entry Level Software Developer

Of course. Thank you for the link!!! Thank you for your amazing help!

Hello,

I am glad I was able to assist you regarding this matter.

Thank you for using Infragistics components. 

Regards,
Riva Ivanova
Entry Level Software Developer