Render Drop down component in grid on click of a cell.

[Venkatesh Babu S N]

Right now when we double click on a row, the whole row will become editable and drop down components will render at this point.

But I have a requirement, when I double click on a particular cell, drop down component should render. 

Can you guys help me with this?

[Praveenkumar Gajendiran]

Hi Venkatesh,

Thanks for contacting Syncfusion support. 

Query: “But I have a requirement, when I double click on a particular cell, drop down component should render”

Based on your query we suspect that your requirement is to cell edit with the Dropdown component by double-clicking a cell. For this, we suggest you use the Batch-Editing feature of Grid to achieve your requirement.

In Batch edit mode, when you double-click on the grid cell, then the target cell changed to edit state. You can bulk save (added, changed, and deleted data in the single request) to the datasource by click on the toolbar’s Update button or by externally invoking the batch save method. To enable Batch edit, set the editSettings.mode as Batch.

Please refer the below code example, sample and document for more information.

Code Example: 

export class BatchEdit extends SampleBase { 

    constructor() { 

        super(...arguments); 

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

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }; 

        this.editparams = { params: { popupHeight: '300px' } }; 

        this.validationRule = { required: true }; 

        this.orderidRules = { required: true, number: true }; 

        this.pageSettings = { pageCount: 5 }; 

    } 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

          <div className='col-md-9'> 

              <GridComponent dataSource={data} pageSettings={this.pageSettings} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings}> 

                <ColumnsDirective> 

                  <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' validationRules={this.orderidRules} isPrimaryKey={true}></ColumnDirective> 

                  <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={this.validationRule}></ColumnDirective> 

                  <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit'></ColumnDirective> 

                  <ColumnDirective field='OrderDate' headerText='Order Date' editType='datepickeredit' format='yMd' width='170'></ColumnDirective> 

                  <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' edit={this.editparams}></ColumnDirective> 

                </ColumnsDirective> 

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

              </GridComponent> 

            </div> 

        </div> 

      </div>); 

    } 

} 

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

Documentation Link: https://ej2.syncfusion.com/react/documentation/grid/edit/#batch
                                       https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-type-and-its-params

Online Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/batch

If this is not meet your requirement , could you please explain/elaborate with more details about your requirement.   

Regards,
Praveenkumar G