When using editTemplate, the change event does not occur

[ThreeGo]

https://ej2.syncfusion.com/vue/documentation/grid/editing/edit-types#render-timepicker-component-in-edit-form

When using edit-template as in the sample url above, it seems that the time-picker change event does not occur when the grid is in batch mode. 

Can you check it?

<e-column field='OrderDate' headerText='Order Time' type="date" width='130' :editTemplate="'editTemplate'" editType='datepickeredit' format='hh :mm a ' textAlign='Right' :validationRules='orderDateRules'>
 <template v-slot:editTemplate>
  <ejs-timepicker id="OrderDate" :value='orderData.OrderDate' @change='onChange'></ejs-timepicker >
 </template>
</e-column>
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };

[Aishwarya Rameshbabu]

Hi ThreeGo,

Greetings from Syncfusion support.

From the provided information and code example, it appears that you are facing an issue where the change event of the TimePicker component is not triggered when rendering it as an editTemplate in the Syncfusion Grid. We have developed a sample based on the shared details where the change event is triggered correctly. Please refer to the code example and sample below, where we have logged a statement in the change event of the TimePicker component to confirm its activation. Additionally, we have managed the data update based on the TimePicker's value using the cellEdit and cellSave events of the Grid.

App.vue

 

<template>

  <div id="app">

    <ejs-grid

      :dataSource="dataGrid"

      :editSettings="editSettings"

      :toolbar="toolbar"

      height="273px"

      :cellEdit="cellEdit"

      :cellSave="cellSave"

    >

      <e-columns>

         …………….

        <e-column

          field="OrderDate"

          headerText="Order Time"

          type="date"

          width="130"

          :editTemplate="'editTemplate'"

          editType="datepickeredit"

          format="hh :mm a "

          textAlign="Right"

          :validationRules="orderDateRules"

        >

          <template v-slot:editTemplate>

            <ejs-timepicker

              id="OrderDate"

              :change="onChange"

              :value="orderData.OrderDate"

            ></ejs-timepicker>

          </template>

        </e-column>

        <e-column

          field="ShipCountry"

          headerText="Ship Country"

          width="150"

          :validationRules="shipCountryRules"

        >

        </e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

 

<script>

           …………….

           …………….

  methods: {

    cellEdit(args) {

      this.orderData = Object.assign({}, args.rowData);

    },

    cellSave(args) {

      this.orderData['OrderDate'] = args.rowData['OrderDate'];

    },

    onChange(args) {

      console.log('Change event is triggered');

    },

  },

</script>

Sample: Nochaa (forked) - StackBlitz

Vide Demonstration: Please find in the attachment.

API References:

cellEdit

cellSave

If you continue to experience issues, please provide us with a simple replication sample or attempt to reproduce the issue using the shared sample.

Regards

Aishwarya R

Attachment: 194942video_217727e.zip

[ThreeGo]

It seems like the problem is still not solved.

After editing the time in edit mode, try moving it with the Tab key.(

Try entering the time on your keyboard)

[Aishwarya Rameshbabu]

Hi ThreeGo,

Based on the shared information, it has been observed that changing the value of the TimePicker component and pressing the tab key does not trigger the change event of that component. To resolve this issue, we recommend using the cell-edit-template feature in the Grid. This approach will ensure that the change event of the TimePicker component, rendered as a custom cell editor, is triggered in all editing scenarios. This can be implemented using the create, read, write, and destroy functions. For further information, please refer to the code example, sample, and documentation link provided below.

App.vue

 

<div id="app">

  <ejs-grid ref='grid' :dataSource='dataGrid' :allowPaging='true' :editSettings='editSettings' :pageSettings='pageSettings' :toolbar='toolbar' height='175px'>

    <e-columns>

            ………………..

      <e-column

      field="OrderDate"

      headerText="Order Time"

      type="date"

      width="130"

      :edit='daParams'

      format="hh :mm a "

      textAlign="Right"

      :validationRules="orderDateRules"

    >

    </e-columns>

  </ejs-grid>

<script>

function createFunction() {

  // Creating the component

  timepickerElem = document.createElement('input');

  return timepickerElem;

}

function destroyFunction() {

  // Destroying the component

  timepickerObj.destroy();

}

function readFunction() {

  // Getting the value from the component

  timepickerObj.focusOut();

  return timepickerObj.value;

}

function writeFunction(args) {

  // Setting the default value to the component

  let rowData = args.rowData;

  timepickerObj = new TimePicker({

      value: rowData.OrderDate,

      change: function (e) { // Change event of the component

        console.log('change event triggered');

        rowData.OrderDate = e.value;

      }

  });

  timepickerObj.appendTo(args.element);

}

    daParams: {

      create: createFunction,

      destroy: destroyFunction,

      read: readFunction,

      write: writeFunction,

    },

 

 

Sample: Nochaa (forked) - StackBlitz

Documentation Link: Edit types in Vue Grid component | Syncfusion

Regards

Aishwarya R

[ThreeGo]

I want the changes to the grid cells to be reflected normally when I use editTemplate.

This issue is handled without any problem in date-picker. I don't understand why the source code should be long and verbose for implementing a simple function of changing cell value. I think time-picker should be modified to ensure consistency between controls.

[Aishwarya Rameshbabu]

Hi ThreeGo,

By default, in Syncfusion Grid with batch mode editing enabled, pressing the Tab key after editing a cell saves the current cell's data and moves to edit the next cell. In your scenario, you are using the TimePicker component as an editTemplate in a Grid column. However, when updating a value using the keyboard and pressing the Tab key, the change event of the TimePicker component is not triggered. This happens because the TimePicker component's change event is triggered only when the component loses focus after a manual update.

To address this, we recommend using the cell-edit-template in the Grid, where the focusOut method is utilized to trigger the change event in our previous update. However, if you prefer to use the editTemplate feature and need to trigger the change event, we have implemented a solution by using the keydown event to update the TimePicker component's value in this specific scenario. Please refer to the provided code example and sample for more details.

App.vue

 

    <ejs-grid

      :dataSource="dataGrid"

      :editSettings="editSettings"

      :toolbar="toolbar"

      height="273px"

      :cellEdit="cellEdit"

      :cellSave="cellSave"

    >

      <e-columns>

       ………………………..

        <e-column

          field="OrderDate"

          headerText="Order Time"

          type="date"

          width="130"

          :editTemplate="'editTemplate'"

          editType="datepickeredit"

          format="hh :mm a "

          textAlign="Right"

          :validationRules="orderDateRules"

        >

          <template v-slot:editTemplate>

            <ejs-timepicker

              ref="timePicker"

              id="OrderDate"

              :value="orderData['OrderDate']"

              :v-model="orderData['OrderDate']"

              @change="onchange"

              @keydown="onKeyDown"

            ></ejs-timepicker>

          </template>

        </e-column>

        <e-column

          field="ShipCountry"

          headerText="Ship Country"

          width="150"

          :validationRules="shipCountryRules"

        >

        </e-column>

      </e-columns>

    </ejs-grid>

 

onKeyDown(args) {

      if (args.code === 'Tab') {

        // Obtain the input value directly from the input element

        const inputValue = args.target.value;

        if (inputValue) {

          const [time, period] = inputValue.split(' ');

          let [hours, minutes] = time.split(':').map(Number);

          // Adjust hours based on AM/PM

          if (period === 'PM' && hours !== 12) {

            hours += 12;

          } else if (period === 'AM' && hours === 12) {

            hours = 0;

          }

          const today = new Date();

          today.setHours(hours, minutes, 0, 0);

          // Directly update the model bound to v-model

          this.orderData.OrderDate = today;

        }

      }

    },

 

Sample: Nochaa (forked) - StackBlitz

Regards

Aishwarya R