Hello Patrick,
When the following feature becomes available, you will be able to define your custom buttons with the desired styling: https://feedback.telerik.com/blazor/1422740-conditional-command-buttons-shown-on-condition-based-on-model-values-and-or-invoking-cud-operations-programmatically.
At the moment, you must have a dedicated column for them anyway, so even if you write a CSS rule that hides them initially the real estate would still be consumed by the column. Nevertheless, here's an example you can start from:
<style>
.k-grid tbody tr .k-button.OnlyHover {
display:none;
}
.k-grid tbody tr:hover .k-button.OnlyHover {
display:inline-flex;
}
</style>
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridCommandColumn>
<GridCommandButton Class="OnlyHover" Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Class="OnlyHover" Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Class="OnlyHover" Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Class="OnlyHover" Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
Regards,
Marin Bratanov
Progress Telerik
UI for Blazor