New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Changing Edit Button Styles in an InLine Editable Grid After Save Operation
Environment
Product | Telerik UI for ASP.NET Core Grid |
Version | 2024.3.806 |
Description
How can I change the background color of the Edit button of an InLine editable Grid when the respective Update or Create operation is successful?
When editing an existing record or adding a new one to an InLine editable Grid, you can dynamically modify the appearance of the Edit command to indicate a successful operation. For example, to update the button's background color to green.
Solution
To implement the solution, follow the steps below:
- Handle the
RequestEnd
event of the Grid's DataSource to identify successful Create/Update operations. Save the index of the new or edited row in a global variable successfulSavedRow. - Handle the
DataBound
event of the Grid, select the element of the modified row by using the stored row index, and add a class successfullSave to the element of the respective Edit command. - Add the desired CSS styles to the successfullSave class. For example,
background-color
,color
, and more. - Handle the
click
event over the Grid and remove the custom class to retrieve the default button's appearance.
Razor
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
..// Columns
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.Events(events => events.DataBound("onDataBound"))
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.RequestEnd("onRequestEnd"))
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
For a runnable example based on the code above, refer to the following REPL samples: