Render TimePicker component in edit form- React Grid

[MOHAN RAM SURYA]

Hi,

     I'm trying to add Timepicker column to the grid. I'm using react version of syncfusion. I do see an example on rendering timepicker column in https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types#render-timepicker-component-in-edit-form .

   When I open the example in StackBlitz from the documentation and change the mode to "Batch", I get an error message as shown in the screenshot below.

   My requirement is to have a Timepicker column with Batch mode on. Can you help me with a solution?

Thanks

[Dineshnarasimman Muthu]

Hi Mohan Ram Surya,

Greetings from Syncfusion Support.

We have reviewed your query about implementing timepicker component in the grid column upon editing with Batch edit mode. In the sample you provided, the editing mode is in inline edit mode, We would like to tell you that for batch editing there are separate events for each action.

We have modified the sample implementing the timepicker component in the grid column upon batch editing. The code snippet and sample have been attached for your reference.

  const editTemplate = () => {

    return (

      <div>

        <TimePickerComponent

          id="OrderDate"

          value={orderData.OrderDate}

        ></TimePickerComponent>

      </div>

    );

  };

  const cellEdit = (args) => {

    if (args.type === 'edit' || args.type === 'add') {

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

    }

  };

 

  <GridComponent

      dataSource={data}

      editSettings={editOptions}

      toolbar={toolbarOptions}

      cellEdit={cellEdit}

    >

 

 

Sample: https://stackblitz.com/edit/timepicker-batch-edit

We have also listed the events for batch editing below, and the API documentation have also been attached for your reference.

Events for Batch Editing: 

• cellEdit: https://ej2.syncfusion.com/react/documentation/api/grid/#celledit

• cellSave/cellSaved: https://ej2.syncfusion.com/react/documentation/api/grid/#cellsave

• batchAdd: https://ej2.syncfusion.com/react/documentation/api/grid/#batchadd

• beforeBatchAdd: https://ej2.syncfusion.com/react/documentation/api/grid/#beforebatchadd

• batchDelete: https://ej2.syncfusion.com/react/documentation/api/grid/#batchdelete

• beforeBatchDelete: https://ej2.syncfusion.com/react/documentation/api/grid/#beforebatchdelete

• beforeBatchSave: https://ej2.syncfusion.com/react/documentation/api/grid/#beforebatchsave

• batchCancel: https://ej2.syncfusion.com/react/documentation/api/grid/#batchcancel

We have also attached the batch editing documentation for your reference.

Documentation: https://ej2.syncfusion.com/react/documentation/grid/editing/batch-editing

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M