Datepicker value in cell edit

[satish ratan patil]

I am using ejs-grid in the angular.

I want to have a date picker in cell edit to be able to set date interval by using edit template and I can't get it working. In my case I get a string from database (e.g. "20200816") so this string would be the cell value when list is loaded. When I add a new record in dialog mode, i want a date parsed from this string, with date picker.date picker value gets undefined. 

Shortly: Load cell with string -> edit cell with a date picker -> set date picker values from parsed string -> change values using date picker -> save cell -> after saving cell the string with new values should appear as cell value.

xyz. html Code:

  <ejs-grid id="manualCreditGrid" [dataSource]="manualCreditGrid" height="350" [allowSorting]="true" [editSettings]="editSettings1"
                            [toolbar]='toolbar'>
                    <e-columns>
                      <e-column id="dateStart" field="gueltigAb" headerText="{{  date }}"
                                [edit]='editDateParams' width="auto"></e-column>
                    </e-columns>
                  </ejs-grid>

xyz.ts

this.editDateParams = {
      //params: { value: this.minDate }
      create: () => {
        this.elem1 = document.createElement('input');
        console.log("Create", this.elem1);
        return this.elem1;       
      },
      read: () => {
        // converting date object into string with required format
        const string1: string = this.intl.formatDate(this.datePickerObj1.value,
          { format: 'yyyyMMdd'});       
        const interval = string1;
        console.log("Read", string1);
        return interval;
      },
      destroy: () => {
        this.datePickerObj1.destroy();       
      },
      write: (args: { rowData: Object, column: any }) => {
        // here data will be like “2018-10-16/2018-10-20”
        console.log("Write Args",args);
        const dates: string = this.minDate.toString();
        this.datePickerObj1 = new DatePicker({
          value: new Date(dates),
          floatLabelType: 'Never',
          format: 'yyyyMMdd',
          min: this.minDate
        });
        this.datePickerObj1.appendTo(this.elem1);                      
      }
    };

[Ajith Govarthan]

Hi Satish, 

Greetings from Syncfusion support. 

Based on your requirement we you want to show the date strings as date object in the edit mode alone and need to update them as again string values. Based on that we have prepared sample in that we have used the DatePicker component as EditTemplate used the date strings as date values for DatePicker component and stored them as again  date string in the data source. 

For your convenience we have attached the sample so please refer them for your reference. 

Code example: 

app.component.ts 

this.dpParams = { 

            create: () => { 

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

                return this.elem; 

            }, 

            read: () => { 

              let intl  = new Internationalization(); 

           const string1: string = intl.formatDate(this.datePickerObj.value, 

          { format: 'yyyyMMdd'});  

                return string1; 

            }, 

            destroy: () => { 

                this.datePickerObj.destroy(); 

            }, 

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

                this.datePickerObj = new DatePicker({ 

                    value:args.rowData[args.column.field] ? new Date( parseInt(args.rowData[args.column.field])) : new Date(parseInt(this.minDate)), 

                    floatLabelType: 'Never', 

                     format: 'yyyyMMdd' 

                }); 

                this.datePickerObj.appendTo(this.elem); 

            } 

        }; 

    } 

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

UG-link: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.