Hi,
I'm having an editable row in a grid, which is a date, and followed the example from the documentation.
https://stackblitz.com/angular/gdkjgjqnodn?file=src%2Fapp%2Fgrid%2Fgrid-editing-sample%2Fgrid-editing-sample.component.html
In the example, there is a format applied like 'dd/MM/yyyy'. When the cell is not in editable mode, it shows the correct format.
However, if you click on the cell and go into editable mode, the format changes to MM/dd/YYYY(first the month instead of days). How can we keep the same format when you click on the cell to edit it?
Hello Helene Delrue,
<igx-column field="OrderDate" header="Order Date" width="15%" [dataType]="'date'" [sortable]="true" [hasSummary]="true" [editable]="true" [resizable]="true"> <ng-template igxCell let-cell="cell" let-val> {{val | date:'dd/MM/yyyy'}} </ng-template> <ng-template igxCellEditor let-cell="cell" let-val> <igx-date-picker [(ngModel)]="cell.editValue ? cell.editValue : cell.value" mode="dropdown" [igxFocus]="true" [labelVisibility]="false" mask="dd/MM/yyyy" format="dd/MM/yyyy"></igx-date-picker> </ng-template> </igx-column>
Best Regards,Martin Evtimov
Hi Martin,
It seems the below code does not work as expected:
<ng-template igxCellEditor let-cell="cell" let-val> <igx-date-picker [(ngModel)]="cell.editValue ? cell.editValue : cell.value" mode="dropdown" [igxFocus]="true" [labelVisibility]="false" mask="dd/MM/yyyy" format="dd/MM/yyyy"></igx-date-picker> </ng-template>
For my case, when I edit the date, I want to pass the new edited value to the API for saving the data. But I am unable to capture the new value selected from the Datepicker while calling the Save action.
Also, I am not using the igx grid overlay, instead I have customized the grid to implement my own buttons to perform Save or cancel actions.
While calling the save action, I am passing cell.rowData as the parameter from the grid.
Could you please help me in this regard?
Regards,
Rakesh
Hello Rakesh,
Thank you for contacting Infragistics Community!
Please note that within the newer versions of IgniteUI for Angular the igxDatePicker component has been modified a lot. I believe you will find the igxDatePicker topic in our official documentation very helpful.
In order to use the igxDatePicker within igxCellEditor template would I suggest the following configuration:
<ng-template igxCellEditor let-cell="cell" let-val> <igx-date-picker [(ngModel)]="cell.editValue" mode="dropdown" [igxFocus]="true" inputFormat="dd/MM/yyyy"> </igx-date-picker> </ng-template>
You can refer to the following sample I have created for you as well.
Please let me know if you need any further information.
Best Regards,Martin EvtimovAssociate Software DeveloperInfragistics, Inc.