New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Changing Edit Button Styles in an InLine Editable Grid After Save Operation

Environment

ProductTelerik UI for ASP.NET Core Grid
Version2024.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:

  1. 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.
  2. 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.
  3. Add the desired CSS styles to the successfullSave class. For example, background-color, color, and more.
  4. 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:

See Also

In this article
EnvironmentDescriptionSolutionSee Also
Not finding the help you need?
Contact Support