Show validation message on entering invalid date format/value in editable grid. Currently the control shows/return null value.

[Komal Pandya]

Hi Team,

Our requirement is to show validation when user enters invalid date format/value in editable grid and not turn the cell to blank. Currently grid date picker seems to be validating data and returns null when value is invalid.

Example :

1. component.ts
   1. 
   this.datepickerParams = {
   create: () => {
   this.datePickerelem = document.createElement('input');
   return this.datePickerelem;
   },
   read: () => {
   return this.datePickerObj.value;
   },
   destroy: () => {
   this.datePickerObj.destroy();
   },
   write: (args: { rowData: object, column: Column }) => {
   this.datePickerObj = new DatePicker({
   value: (args.rowData[args.column.field] ? new Date(args.rowData[args.column.field]) : null),
   placeholder: this.dateFormatPlaceholder,
   format: this.dateFormat,
   });
   this.datePickerObj.appendTo(this.datePickerelem);
   }
   };
2. HTML

#searchResultsGrid id="resultsGrid" [dataSource]='resultsData' [editSettings]='editSettings' [allowSelection]='true'

[selectionSettings]='selectionOptions' cellEdit)="onCellEdit($event)" (cellSave)="onCellSave($event)" >

field='id' headerText='Id #' width='30' isPrimaryKey='true'>

field='fileNumber' headerText='File Number' editType='stringedit' [visible]='false'>

field='fileDateObj' headerText='File Date' editType='datepickeredit' [format]="dateFormatter" [visible]='false' [edit]='datepickerParams'>

If you could provide a sample, would be of great help. Thanks.

[Rajapandiyan Settu]

Hi Komal, 

 

Thanks for contacting Syncfusion support. 

 

Query: Our requirement is to show validation when user enters invalid date format/value in editable grid and not turn the cell to blank 

 

We have validated your requirement, you can achieve your requirement by using column validation rules. Refer to the below documentation. 

 

Column validation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#column-validation 

Custom validation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#custom-validation 

 

Available validation rules: https://ej2.syncfusion.com/angular/documentation/common/reactive-form-validation/ 

 

[app.component.html] 

 

 

    <ejs-grid #grid id="grid" [dataSource]='data' allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' 

                [validationRules]='orderidrules' editType='numericedit'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' [validationRules]='Orderdaterules' width='130' 

                format='yMd' [edit]='dpParams1'></e-column> 

            <e-column field='CustomerID' headerText='Customer Name' width='120'> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

 

 

[app.component.ts] 

 

 

export class AppComponent { 

  @ViewChild('grid', { static: true }) 

  public grid: GridComponent; 

  ---- 

  public Orderdaterules: Object; 

  public elem1: HTMLElement; 

  public datePickerObj1: DatePicker; 

  public dpParams1: IEditCell; 

 

  public ngOnInit(): void { 

      ---- 

    this.Orderdaterules = { 

      required: true, 

      date: true,  // date validation 

      min: [ 

        this.OrderdatecustomFn, 

        'enter the datevalue greater than today time' 

      ]  // custom validation 

    }; 

    this.dpParams1 = { 

      create: () => { 

        this.elem1 = document.createElement('input'); 

        return this.elem1; 

      }, 

      read: () => { 

        return this.datePickerObj1.value; 

      }, 

      destroy: () => { 

        this.datePickerObj1.destroy(); 

      }, 

      write: (args: { rowData: object; column: Column }) => { 

        this.datePickerObj1 = new DatePicker({ 

          value: args.rowData[args.column.field], 

          floatLabelType: 'Never' 

        }); 

        this.datePickerObj1.appendTo(this.elem1); 

      } 

    }; 

  } 

 

  public OrderdatecustomFn: (args: {[key: string]: string; }) => boolean = (args: { [key: string]: string }) => { 

    // validate the date as you want  

    return this.datePickerObj1.value > new Date(); 

  }; 

} 

 

 

 

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

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S