Edit grid with one click

[Hector]

Hello

I have a problem implementing a feature i'd like my grid to have, im working in React with Typescript.

Currently, my grid becomes editable when I double click on a particular row.

What I would like, is to make the grid become editable with just one click, so when I click a row, it enters the editable state and I can modify it.

I've attached the relevant code to give an example of my grid, it contains a CheckBox field, a dropDown field and a numeric field.

Thanks in advance.

PS: I have tried using this tutorial, but this does not seem to be working, not even the example on the page 

https://ej2.syncfusion.com/react/documentation/grid/how-to/enable-editing-in-single-click#batch-editing

var gridInstance:any = null;

const toolbarOptions: any  = [

                                'Update',

                                'Cancel'

                                ];

  const editSettings: any    = { showConfirmDialog: false, allowEditing: true, allowAdding: false, allowDeleting: false,  mode:'Batch'};  

  const pageSettings: Object = { pageSize: 50, pageSizes: true};

  function getDataManager() {

    var remoteData: DataManager = new DataManager({

      url: //My custom URL goes here  

      adaptor: new WebApiAdaptorCustom,      

      headers: [ { 'Authorization': 'Bearer ' + AuthToken.get() }]

    });  

    return remoteData;

return (  

    <ContentWrapper>

      <GridComponent  className='gridDet'

                      dataSource={getDataManager()}

                      ref={grid => gridInstance = grid}

                      toolbar={toolbarOptions}    

                      gridLines='Both'      

                      editSettings={editSettings}                                          

                >              

        <ColumnsDirective>

          <ColumnDirective field='Id' headerText='id' width='140' isPrimaryKey={true} visible={false} ></ColumnDirective>                      

          <ColumnDirective field='checkBox' headerText={"checkBox"} width='80' textAlign='Center' visible={true} type="boolean" allowEditing={true}

                           allowFiltering={false} displayAsCheckBox={true} editType="booleanedit">                            

          </ColumnDirective>

          <ColumnDirective field='foreignKey' headerText={"foreignKey"} width='100' allowFiltering={false} editType='dropdownedit'

                                    foreignKeyValue='foreignKeyValue' foreignKeyField='foreignKeyField' dataSource={/* MY DATASOURCE */}>                                  

          </ColumnDirective>  

          <ColumnDirective field='percentage' headerText={"%"} width='80' textAlign='Right' visible={true} allowEditing={true}

            editType='numericedit'>

          </ColumnDirective>                

        </ColumnsDirective>

        <Inject services={[Page, Toolbar, Edit, Sort,  Filter, ForeignKey, Resize, Selection]} />

      </GridComponent>      

    </ContentWrapper>    

  )

[Rajapandi Ravi]

Hi Hector,

Greetings from Syncfusion support

Based on your query we could se that you like to make the Grid becomes editable on single click. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

const load = () => { //load event of Grid

      let instance = document.getElementById('Grid').ej2_instances[0];

      if (instance) {

          instance.element.addEventListener('mouseup', (e) => {

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

                let rowdetails = instance.getRowInfo(e.target); //pass the target to the getRowInfo() method to get the row details

                let index = rowdetails.rowIndex; //get the rowIndex

                let field = (rowdetails.column).field; //get the fieldname       

                  instance.editModule.editCell(index, field);

              }

              ;

          });

      }

  };

 

Sample: https://stackblitz.com/edit/react-vbs7mw?file=index.js,data.js

[Hector]

That worked perfectly, thank you very much.

I have another question, is it possible to directly edit the checkBox with one click?

Right now the click first selects the row, and then with a second click the checkBox gets marked, is it possible to mark the checkBox directly with the single click?

Thanks a lot!

[Monisha Saravanan]

Hi Hector,

Query: “Right now the click first selects the row, and then with a second click the checkBox gets marked, is it possible to mark the checkBox directly with the single click?”

Yes, you can achieve your requirement by placing checkbox inside column template. So that it can be clicked directly. Kindly check the below attached UG for your reference.

Reference: Column template in React Grid component | Syncfusion

Please get back to us if you face any difficulties or if you have further queries.

Regards,
Monisha

[Jeff Voigt]

Won't adding the event listener cause a memory leak without it being removed at some point if the user switches to other pages/controls?  Where should the remove of the event listenere

[Vikram Sundararajan]

Hi Jeff Voigt,

Greetings from Syncfusion support,

Based on your query wants to edit on single click without using addEventListener. We have achieved your requirement by binding the onmousedown event directly to the Grid element is a well-structured and efficient way to handle single-click editing. This approach eliminates the need for explicit event listener management and reduces the risk of memory leaks, as the event handler is tightly coupled with the Grid element's lifecycle.

  [Index.Js]

 

 function load(args) {

      let instance = document.getElementById('Grid').ej2_instances[0];

      instance.element.onmousedown = function (e) {

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

          e.preventDefault();

          if (instance.isEdit)

            instance.endEdit();

          var index = parseInt(event.target.getAttribute("Index"));

          instance.selectRow(index);

          instance.startEdit(); }

      }

 

    }

 

In this code essentially listens for the onmousedown event on the Grid element. When a user clicks on a cell (e-rowcell), it prevents the default behavior, checks if there's an ongoing edit, ends the edit, if necessary, selects the clicked row, and initiates the editing process. Please refer the below sample and API documentation for more information,

Sample:  https://stackblitz.com/edit/react-zwtxlm-ymkhmn?file=index.js

startEdit:  https://ej2.syncfusion.com/react/documentation/api/grid/#startedit

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S