Enable editing in single click in a functional component

[Eric Ouellette]

Hi,

I would like to know how to enable editing in a single click in a functional component.

I didn't find any way to achieve it

Thanks

[Praveenkumar Gajendiran]

Hi Eric,

Greetings from Syncfusion support. 

Based on your query, we could see that you want to enable editing in single click in React functional component. We can make a row editable on a single click with Normal mode of editing in Grid, by using the startEdit and endEdit methods. 

Bind the mouseup event for Grid through Grid’s created event and in the event handler call the startEdit and endEdit, based on the clicked target element.

We have prepared a functional component based on this for your reference. Please check the below sample and code example for more information.

Sample: https://stackblitz.com/edit/react-xa25ij-mmyavb?file=component%2Fapp.jsx 

Code Example: 

var editSettings = { 

  allowEditing: true, 

  allowAdding: true, 

  allowDeleting: true, 

  newRowPosition: 'Top' 

}; 

var toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

//Grid’s Created event 

const created = () => { 

  grid.element.addEventListener('mouseup', function(e) { 

    if (e.target.classList.contains('e-rowcell')) { 

      if (grid.isEdit) grid.endEdit(); 

      let index = parseInt(e.target.getAttribute('Index')); 

      grid.selectRow(index); 

      grid.startEdit(); 

    } 

  }); 

}; 

const SyncGrid = () => { 

  return ( 

    <div> 

      <GridComponent 

        id={'Grid'} 

        created={created} 

        dataSource={hierarchyOrderdata.slice(0, 9)} 

        ref={g => (grid = g)} 

        editSettings={editSettings} 

        toolbar={toolbarOptions} 

        height={320} 

      > 

        <ColumnsDirective> 

          <ColumnDirective 

            field="OrderID" 

            headerText="Order ID" 

            width="100" 

            isPrimaryKey={true} 

          /> 

          <ColumnDirective 

            field="CustomerID" 

            headerText="Customer ID" 

            width="100" 

          /> 

          <ColumnDirective 

            field="Freight" 

            headerText="Freight" 

            textAlign="Right" 

            width="120" 

            format="C2" 

          /> 

          <ColumnDirective 

            field="ShipCountry" 

            headerText="Ship Country" 

            width="100" 

          /> 

        </ColumnsDirective> 

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

      </GridComponent> 

    </div> 

  ); 

}; 

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

API Link: https://ej2.syncfusion.com/react/documentation/api/grid/#created
                https://ej2.syncfusion.com/react/documentation/api/grid/#startedit
                https://ej2.syncfusion.com/react/documentation/api/grid/#endedit 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G