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

Environment

Product	Telerik UI for ASP.NET MVC 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:

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"))
    )
  )

Html

<script type="text/javascript">
   var successfulSavedRow = null;

    function onRequestEnd(e) {
        var grid = $("#grid").data("kendoGrid");
        if(e.type == "update") {
            if(e.response.Errors == null) { // Successful Update operation.
                var editedRecord = e.response.Data[0];
                var editedDataItem = e.sender.get(editedRecord.ProductID);
                var editedRow = $(".k-grid-table").find(`tr[data-uid='${editedDataItem.uid}']`);
                var editedRowIndex = $(editedRow).index();
                successfulSavedRow = editedRowIndex;
            }
        } else if(e.type == "create") {
            if(e.response.Errors == null) { // Successful Create operation.
                successfulSavedRow = 0;
            }
        }
    }
    function onDataBound(e) {
        var grid = e.sender;
        if(successfulSavedRow != null) {
              var editedRow = grid.tbody.find('tr:eq(' + successfulSavedRow + ')');
              var editButton = editedRow.find('.k-grid-edit-command');
              editButton.addClass('successfullSave'); // Add a custom class to the "Edit" button.
              successfulSavedRow = null;
        }
    }
    $(document).ready(function(){
      $(document).on("click","#grid",function() {
        $.each($(".k-table-tbody tr"), function(){
            var editBtn = $(this).find('button.k-grid-edit-command');
            if($(editBtn).hasClass("successfullSave")) {
                $(editBtn).removeClass("successfullSave"); // Remove the custom class when the user clicks on the Grid's table.
            }
        });
      });
    });
    </script>

Html

  <style>
   .successfullSave, .successfullSave:hover{
     background-color: green;
   }
  </style>

For a runnable example based on the code above, refer to the REPL example on updating the Edit button's appearance of the Grid after saving changes.

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC

• Server-Side API Reference of the Grid for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base