On blur event doesnt trigger in edit mode

[Unknown]

prepareFollowUpDateCell(): void {

    this.followUpParam = {

      create: () => {

        this.followUpEle = document.createElement("input");

        return this.followUpEle;

      },

      read: () => {

        return this.followUpObj.value;

      },

      destroy: () => {

        this.followUpObj.destroy();

      },

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

        this.followUpObj = new DatePicker({

          value: args.rowData["followUpDate"],

          floatLabelType: 'Never',

          created: created.bind(this),

          blur: (txtargs: FocusOutEventArgs | any) => {

            var ddlValue = this.usersDDLobj !== undefined ? ((this.usersDDLobj.value !== null) && (this.usersDDLobj.value !== "0") ? this.usersDDLobj.value.toString() : null) : null;

            this.orderService.updateUserAndReviewNotes(args.rowData.orderNumber, ddlValue, this.reviewNotesObj.element.value,this.followUpObj.value);

            this.userId = ddlValue;

          }

        });

        function created(){

          this.followUpObj.inputElement.disabled = true

        }

        this.followUpObj.appendTo(this.followUpEle);

        this.followUpObj.element.addEventListener('keydown', (e: KeyboardEventArgs) => {

          if (e.key === 'Enter' && e.which === 13) {

            this.followUpObj.blur.apply(this);

          }

        });

      }

    };

  }

<ejs-grid #specificationQueueGrid id="reviewSpecificationListGrid" gridLines="Both" [dataSource]="data" [allowFiltering]="true"

        [allowSorting]="true"  [allowMultiSorting]="true" [allowPaging]="true" allowTextWrap="true" (rowDataBound)="rowDataBound($event)" 

        [pageSettings]="pageSettings"  [sortSettings]="sortSettings" (dataBound)="dataBound()" (queryCellInfo)='customiseCell($event)' [editSettings]="editSettings" (actionComplete)='actionComplete($event)'>

        <ng-template #detailTemplate let-data>

          <cpi-queue [OrderNumber]="data.orderNumber" [OrderStatus]="data.status"></cpi-queue>

        </ng-template>

        <e-columns>

          <e-column field="orderNumber" headerText="Order #" width="15" textAlign='Center' [allowEditing]='false' isPrimaryKey='true'>

            <ng-template #template let-data>

              <a (click)="onClickOrderNumber(data.orderNumber)" rel='nofollow' href="javascript:void(0);">{{data.orderNumber}}</a>

            </ng-template>

          </e-column>

          <e-column field="followUpDate" headerText="Follow Up Date" width="18" type='date' textAlign='Center' [allowEditing]='true' editType="datepickeredit" [edit]='followUpParam'

            [format]="{type: 'date',  format: 'MM/dd/yyyy'}">

            <!-- <ng-template #template let-data>

              {{data?.followUpDate}}

             </ng-template> -->

            </e-column>

          <e-column field="userName" headerText="User" width="20"  editType='dropdownedit' [edit]='usersParams'>

              <ng-template #template let-data>

                  {{data?.userName}}

                 </ng-template>

          </e-column>

          <e-column field="specificationReviewNotes" headerText="Specification Review Notes" [edit]='reviewNotesParams' width="25" textAlign="Left" headerTextAlign="Center">

              <ng-template #template let-data>

                  {{data?.specificationReviewNotes}}

                 </ng-template>

          </e-column>

        </e-columns>

      </ejs-grid> I've two issues and first one being the major one. 1) Here is my code and when I try to edit cell with followup date and blur event doesn't seem to work which is used to update latest value

in the Database 2) Please help me with some value to clear the calendar selected date since I've disabled the input text box part to restrict users from entering false data

[Praveenkumar Gajendiran]

Hi Leela,

Greetings from Syncfusion support.

Query1 : “Here is my code and when I try to edit cell with followup date and blur event doesn't seem to work which is used to update latest value  

in the Database”

Based on your query, we would like to inform you that by default Datapicker’s blur event triggers when the input element loses the focus. In your provided code example, we found that you have disabled the Datapicker’s input element, in this case the Datapicker’s blur event will not trigger.  

If you want to restrict the users from entering the false data, We already have allowEdit feature for this functionality which prevents user from entering a data when it is set to “false”. Refer the below document and code example for more information,  

API Link: https://ej2.syncfusion.com/angular/documentation/api/datepicker/#allowedit 

this.datePickerObj = new DatePicker({ 

          value: new Date(args.rowData[args.column.field]), 

          allowEdit: false, 

        }); 

        this.datePickerObj.appendTo(this.elem); 

Query2: “Please help me with some value to clear the calendar selected date since I've disabled the input text box part to restrict users from  

entering false data”
You can set the datepicker.inputElement.value to null in the Datapicker’s change event to achieve your requirement. Refer the below document and code example for more information,  

API Link: https://ej2.syncfusion.com/angular/documentation/api/datepicker/#change 

this.datePickerObj = new DatePicker({ 

          value: new Date(args.rowData[args.column.field]), 

          allowEdit: false, 

          floatLabelType: "Never", 

          change: args => { 

            (args.element as any).value = null; 

          } 

        }); 

        this.datePickerObj.appendTo(this.elem); 

We have prepared a sample based on this for your reference. 

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

Please get back to us if you need further assistance.

Regards,
Praveenkumar G