diff --git a/grid-sdk/blazor/data-grid/command-column-editing.md b/grid-sdk/blazor/data-grid/command-column-editing.md index 150d1e13..785a0ad3 100644 --- a/grid-sdk/blazor/data-grid/command-column-editing.md +++ b/grid-sdk/blazor/data-grid/command-column-editing.md @@ -1,33 +1,36 @@ --- layout: post -title: Command Column Editing in Blazor DataGrid | Syncfusion® -description: Learn how to configure Command Column Editing in Blazor DataGrid with setup, usage, and customization tips. +title: Blazor Grid Command Column Editing | Syncfusion +description: Learn how to use command column editing in Blazor Data Grid with built-in edit, delete, save, cancel, and custom command buttons for CRUD operations. platform: grid-sdk control: DataGrid documentation: ug --- -# Command column editing in Blazor DataGrid +# Command Column Editing in Blazor Data Grid -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports command column editing, which enables CRUD (Create, Read, Update, Delete) action buttons within a column to perform operations on individual rows. This approach is suitable for inline editing, deletion, or saving changes directly within the Grid. +The [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports command column editing. Command column editing enables **Edit**, **Delete**, **Save**, and **Cancel** buttons within a column to perform operations on individual rows. Command column editing is suitable for inline editing, deletion, or saving changes directly within the Data Grid. -To enable command column editing, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property defines which command buttons **Edit**, **Delete**, **Save**, and **Cancel** should appear in the command column. +To enable command column editing, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property through the `GridCommandColumns` tag. The tag defines which of the command buttons (Edit, Delete, Save, Cancel) appear in the column. +Before configuring command columns, enable editing and deleting in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). Set [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing) and [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) to `true` to enable the **Edit** and **Delete** buttons. -| Command Button | Action | -|---------------|-----------------------------| -| Edit | Edit the current row. | -| Delete | Delete the current row. | -| Save | Update the edited row. | -| Cancel | Cancel the edit operation. | +| Command button | Actions | +|----------------|---------| +| `Edit` | Enables inline editing for the current row. | +| `Delete` | Removes the current row from the grid. | +| `Save` | Updates changes made to the edited row. | +| `Cancel` | Discards changes and exits edit mode.| -In this configuration, the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property is used to display all four command buttons in the Manage Records column. +Edit and Delete buttons are displayed when a row is not being edited. Save and Cancel buttons are displayed only while a row is in edit mode. + +In this configuration, the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) tag displays all four command buttons in the Manage Records column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -94,11 +97,11 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVyZWBVCmUhlVYq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhxtGXrCkmbjMxB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Custom command column +## Custom command column button -The Blazor DataGrid supports adding custom command buttons in a column to perform specific actions on individual rows. This feature is suitable for implementing customized functionality such as editing, deleting, or executing other operations. +The Blazor Data Grid supports adding custom command buttons for row-specific actions beyond the built-in edit and delete commands, such as displaying selected record details in a dialog when a user clicks a custom button. To add custom command buttons, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Define the actions for these buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event. @@ -117,7 +120,7 @@ To add custom command buttons, configure the [GridColumn.Commands](https://help. - + @@ -144,11 +147,11 @@ To add custom command buttons, configure the [GridColumn.Commands](https://help. private SfDialog Dialog; private string DialogHeader; private OrderDetails selectedRecord; - private void CommandClickedHandler(CommandClickEventArgs args) + private async Task CommandClickedHandler(CommandClickEventArgs args) { selectedRecord = args.RowData; DialogHeader="Row Information of " + selectedRecord.OrderID; - Dialog.ShowAsync(); + await Dialog.ShowAsync(); } } {% endhighlight %} @@ -199,22 +202,22 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVHDwDBiEFgGUVy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> The Blazor DataGrid does not support **adding new records** using the command column. This limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **update** operations. +> The Blazor Data Grid does not support **adding new records** using the command column. The limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **Save (update)** operations. ## Hide command column button in specific records -The Blazor DataGrid supports conditionally hiding command buttons for specific records based on defined criteria. This is useful when certain actions such as delete or update should be restricted depending on the record's state. +The Blazor Data Grid supports conditionally hiding command buttons for specific records based on defined criteria. Conditional visibility is useful when certain actions such as delete or update should be restricted depending on the record's state. -To implement this behavior, use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which is triggered whenever a row is created or updated in the Grid. +To implement conditional visibility, use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which is triggered whenever a row is created or updated in the Data Grid. The following steps outline how to conditionally hide command buttons: * Use the `RowDataBound` event to access each row's data during rendering. * Check the value of the **Verified** column for the current record. -* If the **Verified** value is **false**, display only the **Edit** button; otherwise, display the **Delete** button. -* To hide buttons, apply a CSS class to the row using the **addClass** method inside the `RowDataBound` event based on the record condition. Define corresponding CSS rules to apply the style to the respective command buttons. +* If the **Verified** value is **false**, display only the **Edit** button; otherwise, display only the **Delete** button. +* To hide buttons, apply a CSS class to the row using the **AddClass** method inside the `RowDataBound` event based on the record condition. Define corresponding CSS rules to apply the style to the respective command buttons. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -226,7 +229,7 @@ The following steps outline how to conditionally hide command buttons: - + @@ -286,4 +289,11 @@ The following steps outline how to conditionally hide command buttons: {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLetprbTsENCfsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrxtctVWavQkxmJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## See also + +* [Template editing](./template-editing.md) +* [Cell editing](./cell-editing.md) +* [Batch editing](./batch-editing.md) +* [Dialog editing](./dialog-editing.md) \ No newline at end of file