How to delete a row when a button is clicked inside a DataGrid column?

Asked
Active3 hr before
Viewed126 times

8 Answers

deletedatagridcolumninsideclickedbutton
90%

The params object offers a few properties but I do not know how to do something like this: delete the row on which a button was clicked, a button that is defined in the UserRowActions component.,I have a data table with users and I want to make a delete button work on the rows, but it seems that it cannot be done by reactish means.,I have a column with custom renderCell function that shows some action buttons. The column definition is this:

I made a context specially for the data grid action buttons:

export const DataGridContext = React.createContext<{ deleteUser?: (uid: string) => void }>({});

// ...

const { data: users, isLoading, isError } = useGetUsersQuery();

const [usersRows, setUsersRows] = useState<IUser[]>([]);

useEffect(() => {
  if (typeof users !== 'undefined') {
    setUsersRows(users);
  }
}, [users]);

<DataGridContext.Provider value={{ deleteUser: (uid: string) => {
  const newRows = [...usersRows];
  const idx = newRows.findIndex(u => u.id === uid);

  if (idx > -1) {
    newRows.splice(idx, 1);
    setUsersRows(newRows);
  }
}}}>
  <DataGrid
    rows={usersRows} // ...
  />
</DataGridContext.Provider>

// In the UserRowActions component:

const dataGrid = useContext(DataGridContext);

// ...

dataGrid.deleteUser!(userId);

88%

You can use the RemoveAt method for deleting a record from the grid view.

DataGridView1.Rows.RemoveAt(deleteIndex);
load more v
72%

 Pretag team - issue, fix, solve, resolve
65%

View Python questions,View Javascript questions,View Unanswered Questions

 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e) {

    if (e.RowIndex >= 0 && e.ColumnIndex == 4 && ((DataGridView) sender).Columns[e.ColumnIndex].GetType() == typeof(DataGridViewButtonColumn)) {
       DataGridViewRow row = (DataGridViewRow) dataGridView1.Rows[0].Clone();
       dataGridView1.Rows.Add(row);
    }
 }
load more v
75%

 Pretag team - issue, fix, solve, resolve
40%

Occurs when the Delete button is clicked for an item in the DataGrid control.,The DeleteCommand event is raised when the Delete button is clicked for an item in the DataGrid control.,The following code example demonstrates how to specify and code a handler for the DeleteCommand event to delete an item from the DataGrid control.

Pretag
public:
   event System::Web::UI::WebControls::DataGridCommandEventHandler ^ DeleteCommand;
load more v
22%

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. confirmDelete property to hide this dialog.,Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the confirmDelete property to hide this dialog.,Configure the form using the editing.form object. The DataGrid uses the DevExtreme Form UI component, so you can specify any Form properties in this object except those listed in its description.

$(function() {
   $("#dataGridContainer").dxDataGrid({
      // ...
      editing: {
         allowUpdating: true,
         allowAdding: true,
         allowDeleting: true,
         mode: 'row' // 'batch' | 'cell' | 'form' | 'popup'
      },
      columns: [{
            dataField: 'id',
            allowEditing: false
         },
         // ...
      ]
   });
});
load more v
60%

We are here to help. Should you have any questions or need assistance from a member of our team, write to us at info@devexpress.com. ,DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

 Pretag team - issue, fix, solve, resolve

Other "delete-datagrid" queries related to "How to delete a row when a button is clicked inside a DataGrid column?"