Bind Datagrid with edit and delete action in blazor c#| Edit data in blazor c#| Delete Data in blazor Datagrid

 Bind Datagrid with edit and delete action in blazor c#| Edit data in blazor c#| Delete Data in blazor Datagrid 

To bind a grid in Blazor with edit and delete actions, you can use the `DataGrid` component and customize the columns to include buttons or links for the edit and delete actions. Here's an example of how you can achieve this:

1. Define a model for your data: Create a class to represent the data structure for your grid. This class should have properties that correspond to the columns of your grid.

csharp

public class GridItem

{

    public int Id { get; set; }

    public string Name { get; set; }

    public int Age { get; set; }

    // Add other properties as needed

}

2. Create a collection of data: In your Blazor component, create a collection of data to populate the grid. This collection should contain instances of the model class defined in the previous step.

csharp

private List<GridItem> gridData = new List<GridItem>

{

    new GridItem { Id = 1, Name = "John", Age = 25 },

    new GridItem { Id = 2, Name = "Jane", Age = 30 },

    // Add more data items

};

3. Add the `DataGrid` component to your component's markup: In your component's markup, add the `DataGrid` component and specify the columns you want to display. Customize the columns to include buttons or links for the edit and delete actions.

razor

<DataGrid Items="@gridData">

    <DataGridColumns>

        <DataGridColumn Field="@nameof(GridItem.Name)" Title="Name" />

        <DataGridColumn Field="@nameof(GridItem.Age)" Title="Age" />

        <DataGridColumn Title="Actions">

            <Template>

                <button @onclick="@(context => EditItem(context))">Edit</button>

                <button @onclick="@(context => DeleteItem(context))">Delete</button>

            </Template>

        </DataGridColumn>

    </DataGridColumns>

</DataGrid>

In this example, a column titled "Actions" is added to the `DataGridColumns` section. Within the column, a template is used to define the buttons for the edit and delete actions. The `EditItem` and `DeleteItem` methods are bound to the respective button's `@onclick` event handler and receive the current item's context as an argument.

4. Implement the edit and delete actions: In your Blazor component, implement the logic for the edit and delete actions.

csharp

private void EditItem(GridItem item)

{

    // Perform edit logic for the selected item

}

private void DeleteItem(GridItem item)

{

    // Perform delete logic for the selected item

    gridData.Remove(item); // Example: Remove the item from the collection

}

In the `EditItem` and `DeleteItem` methods, you can implement the custom logic for the edit and delete actions based on the selected item. This can include updating the item, navigating to a different page, displaying confirmation dialogs, or making API requests.

By following these steps, you can bind a grid in Blazor with edit and delete actions. The `DataGrid` component provides the foundation for displaying the data, and you can customize the columns to include buttons or links for performing the desired actions on each row of the grid.

Thanks for learning. Happy learning..

If you have any queries or suggestion please comment the same...