How to let grid cell include two component and return one value to the cell

[developer]

I am using React Javascript.

How can I build a grid cell include two timepicker and return one value when the cell updated.

In the picture, I have two timepicker component (from and to), how can I return a (HH:mm - HH:mm) value updated to cell when (from timepicker) and (to timepicker) updated.

<div>

      <span style={{ margin: "0 10px" }}>Fromspan>

      <TimePickerComponent

        value={timeFrom}

        format="HH:mm"

      />

      <span style={{ margin: "0 10px" }}>tospan>

      <TimePickerComponent value={timeTo} format="HH:mm" />

    div>

[Manivel Sellamuthu]

Hi Customer, 

Greetings from Syncfusion support. 

You can achieve your requirement by using editTemplate feature and actionBegin event of the Grid. Please find the below code example and sample for more information. 

In the below sample we have rendered the two timePickers with id using editTemplate and saved the value of the time pickers to the rowData in the actionBegin event of the Grid. 

import { render } from 'react-dom'; 

import './index.css'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Toolbar } from '@syncfusion/ej2-react-grids'; 

import { orderDataSource } from './data'; 

import { SampleBase } from './sample-base'; 

import { getValue } from '@syncfusion/ej2-base'; 

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; 

import { TimePickerComponent } from '@syncfusion/ej2-react-calendars'; 

 

export class NormalEdit extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update']; 

        this.editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, }; 

        this.format = { type: 'time', format:'HH:mm' }; 

    } 

     

 

   editTemplate(args) { 

     var timeFrom = args.OrderDate ? args.OrderDate.getHours() + ':' + args.OrderDate.getMinutes() : new Date(); 

     var timeTo = args.ShippedDate ? args.ShippedDate.getHours() + ':' + args.ShippedDate.getMinutes() : new Date(); 

      return (<div style={{width: '120px'}}> 

//rendered the two timePickers with id using editTemplate 

      <span style={{ margin: "10px 10px" }}> From 

      <TimePickerComponent id='fromTime'  

        value={timeFrom} 

        format="HH:mm" 

      /></span> 

      <span style={{ margin: "0 10px" }}>to 

      <TimePickerComponent id='toTime' value={timeTo} format="HH:mm" /> 

      </span> 

      </div>) 

  } 

    

  timeTemplate (args) { 

       var timeFrom = args.OrderDate.getHours() + ':' + args.OrderDate.getMinutes(); 

     var timeTo = args.ShippedDate.getHours() + ':' + args.ShippedDate.getMinutes(); 

   return (<div> {timeFrom} - {timeTo}</div>) 

  } 

 

  actionBegin (args) { 

    if (args.requestType === 'save') { 

// saved the value of the time pickers to the rowData in the actionBegin event of the Grid 

      args.data.OrderDate  = args.form.querySelector('#fromTime').ej2_instances[0].value 

      args.data.ShippedDate  = args.form.querySelector('#toTime').ej2_instances[0].value 

    } 

  } 

 

   render() { 

    return ( 

      <div> 

      <GridComponent  actionBegin={this.actionBegin.bind(this)}  dataSource={orderDataSource.slice(0, 5)} editSettings={this.editOptions}  

      toolbar={this.toolbarOptions} > 

      <ColumnsDirective> 

          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/> 

          <ColumnDirective field='OrderDate' headerText='Order Running from' template={this.timeTemplate.bind(this)} 

           format={this.format} width='190' editTemplate={this.editTemplate.bind(this)}/> 

          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>                   

      </ColumnsDirective> 

      <Inject services={[Edit, Toolbar]} /> 

    </GridComponent> 

          

      </div>); 

    } 

} 

 

render(<NormalEdit />, document.getElementById('sample')); 

Sample: https://stackblitz.com/edit/react-152731 

Please get back to us, if you need further assistance. 

Regards, 

Manivel