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:
<igx-column width="112px" field="orderDate" [dataType]="'date'" [pipeArgs]="formatDateOptions" header="Order Date" [resizable]="true" [sortable]="true" [editable]="false" [movable]="true" [cellClasses]="greenRowLotClass"> </igx-column>
And here is my [pipeArgs]:
public dateOptions = { format: 'mediumDate', timezone: 'UTC+0' }; public formatDateOptions = this.dateOptions;
Thank you in advance.
I am glad I was able to assist you regarding this matter.
Thank you for using Infragistics components.
Regards,Riva IvanovaEntry Level Software Developer
Of course. Thank you for the link!!! Thank you for your amazing help!
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.
Hello Riva,
I also have action buttons for editing a selected cell. Is it possible to save this feature in the state?
<igx-column width="112px" field="FirstName" dataType="string" header="First Name" [resizable]="true" [sortable]="true" [editable]="true" [movable]="true" > <ng-template igxCell let-cell="cell"> <div [ngClass]="[cell.row.deleted?'upfont' : 'text-cell']">{{cell.value}}</div> <button class="action-button" [ngClass]="[cell.row.deleted?'grey-button-deleted-row' : 'black-button-edit-cell']" igxButton="icon" [disabled]="cell.row.deleted" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)"> <igx-icon class="action-icon">edit</igx-icon> </button> </ng-template> </igx-column>
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.
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:
<igx-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)"> <igx-column field="RegistererDate" header="Registerer Date" dataType="date" [pipeArgs]="formatDateOptions"> </igx-column> ... </igx-grid>
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 IvanovaEntry Level Software Developer