Add row option in context menu (Grid)

[Venkatesh Babu S N]

Add row option in context menu (Grid)

[Shalini Maragathavel]

Hi Venkatesh, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you need add row item  option in the context menu to add the record in the Grid. To achieve your requirement we suggest you to define the custom context menu items to the Grid as demonstrated in the below code snippet, 

 

 

export class ContextMenuSample extends SampleBase { 

  constructor() { 

     

    this.contextMenuItems = [ 

      

      { text: "AddRow", target: ".e-content", id: "row" } 

    ]; 

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

  } 

  contextMenuClick (args) {  

    if (args.item.id == 'row') { 

      var data=JSON.stringify(args.rowInfo.rowData) 

this.grid.addRecord(args.rowInfo.rowData); 

    } 

    

  } 

 

  render() { 

    return ( 

       

          <GridComponent 

            

            contextMenuItems={this.contextMenuItems} 

            contextMenuClick={this. contextMenuClick.bind(this)} 

            editSettings={this.editing} 

          > 

            <ColumnsDirective> 

              . . . 

            </ColumnsDirective> 

            <Inject 

              services={[    Resize, Sort, ContextMenu,Edit, PdfExport]} 

            /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

 

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/react-nmmig9-2eb1w7?file=index.js

Documentation: https://ej2.syncfusion.com/react/documentation/grid/context-menu/#custom-context-menu-items 

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

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[Venkatesh Babu S N]

Hi,

     Thanks for the example. It worked.

Regards,

Venky

[Shalini Maragathavel]

Hi Venkatesh, 

Thanks for the update.

We are glad to hear that the provided solution resolved your query. Please get back to us if you need further assistance.


Regards,
Shalini M.