How to delete/remove a row from grid using custom button?

[PRASHANT YADAV]

 

These are buttons i am using for deleting the row and using allowRowDragandDrop ​for the additional information. I am using Functional component. 

[Rajapandi Ravi]

Hi PRASHANT,

Greetings from Syncfusion support

Based on your query we could see that you are using custom command button and like to delete/remove the respective row in the Grid. We would like to inform you that by default we have our inbuilt delete command button to perform the delete action, please refer the below code example and sample for more information.

 

const commands = [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },

{ type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },

{ type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },

{ type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }]

 

function Home() {

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <GridComponent

        id="Grid"

        dataSource={data}

        allowPaging={true}

        editSettings={editSettings}

      >

         <ColumnsDirective>

              .  .  .  .  .  .  .  .  .  .  .  .  .

              .  .  .  .  .  .  .  .  .  .  .  .  .

              <ColumnDirective headerText='Manage Records' width='160' commands={commands}></ColumnDirective>

            </ColumnsDirective>

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

      </GridComponent>

    </div>

  );

}

 

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

If you like to perform the delete action by using the command button, the custom command buttons can be added in a column by using the column.commands property and the action for the custom buttons can be defined using commandClick event. Please refer the below code example and sample for more information.

 

const commandClick = (args) => {

  if(args.commandColumn.buttonOption.content === 'Delete') {

    var grid = document.getElementById('Grid').ej2_instances[0];

    grid.deleteRow(args.target.closest('tr'));

  }

}

 

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

Documentation: https://ej2.syncfusion.com/react/documentation/grid/editing/command-column-editing/#custom-command-column

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

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

Regards,

Rajapandi R

[PRASHANT YADAV]

Hello,

After Drag and Drop , when deleting the row and than again adding a new row by drag and drop .It is showing the deleted row with the all the others ,with an error . I have attached the recording of it and  error also.

Attachment: chromecapture2022716_7a20cfc1.zip

[Rajapandi Ravi]

Hi PRASHANT,

Thanks for the update.

We have checked your shared scenario and based on your query we have prepared a sample and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below sample for more information.

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

By default, all the CRUD actions in EJ2 Grid are performed based on the primary key. So, we suggested you set isPrimaryKey as true in any one of unique column. We suspect that it may be the cause of the problem. So please ensure that you are maintaining primaryKey column in your dropped Grid.

If you still face the issue, please share us any simple issue reproducible sample or try to reproduce the issue in our above attached sample.

Regards,

Rajapandi R

[PRASHANT YADAV]

Hello,

Thanks for the help.

So the issue  is with  editSettings ​as I was using mode:"Batch" ​in editsetting  ​. Don't know the reason but yes after removing mode , it is working fine. Your sample helped me in resolving the issue.

[Rajapandi Ravi]

Hi PRASHANT,

We are happy to hear that our provided suggestion was helpful to resolve your problem.

Please get back to us if you need further assistance.

Regards,

Rajapandi R