How do I prevent the cancel event from changing my grid row color?

Question

I search for data and then bind to my grid. In the grid's databound event, I change the row background color according to the cell's value. This works OK. But when I click the Edit button in the grid and then click the Cancel button, the grid no longer has the background color set. I tried to call the databound event in the Cancel event, but it does not work. How do I prevent the Cancel Event from changing my grid color?

grid

   @(Html.Kendo().Grid(Model) 
            .Name("mygrid")
             .Events(e=>e.DataBound("dataBound"))
            .Columns(columns =>
            {
            columns.Bound(p =>p.StudentName).Title("StudentName");
            columns.Command(command =>
             {
              command.Edit().UpdateText("Edit");
              command.Destroy().Text("Delete");
             }).Width(160);
                })
            .Editable(editable => editable.Mode(GridEditMode.PopUp)
            .TemplateName("SudentEditor")
            .Window(configurator=>configurator.Width(500)
            .Title("EditStudent")))
            .Scrollable() 
            .Events(events=>events.Cancel("onCancel"))
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(model =>
                    {
                    model.Id(p => p.Id);
                    })
                .Read(read => read.Action("GetStudentForGrid", "Student"))
                .Create(create=>create.Action("CreateSudent","Equipment"))        
                .Update(update => update.Action("UpdateStudent", "Student"))
                .Destroy(destory=>destory.Action("DestroyStudent","Student"))     
                .Events(events => events.Error("error_handler"))
            ))

databound event

  //change grid color
   function dataBound(e) {

        $("#mygrid tbody tr").each(function(i) {
          $(this).find("td:lt(9)").css("backgroundColor", '#000000');
        });
    }

cancel event

     //I try to call preventDefault event and close the PopUp window
    //,but the background is still grey
    function onCancel(e) {
    //e.preventDefault();
    //e.container.parent().css("display", "none");
   // e.sender.clearSelection();
    dataBound();
}

Answer 1

You can use grid.cancelRow() in the cancel enent,and then refresh the grid.

Answer 2

Just refresh the grid in the cancel event. It will fire the onDataBound event again. I had the same issue and resolved it like this:

function onCancel(e) {

   $("#GridName").data("kendoGrid").refresh();

}

//change grid color
function dataBound(e) {

    $("#mygrid tbody tr").each(function(i) {
        $(this).find("td:lt(9)").css("backgroundColor", '#000000');
    });
}

Answer 3

If you don't want to refresh the grid but run code after the event has finished instead, you can use a setTimeout() in the cancel event.

function onGridCancel(e){
  setTimeout(function() {
    colorMyRowsBeutifully();
  }, 0);
}

See this answer from Telerik: https://www.telerik.com/forums/grid-cancel-event

Answer 4

I also ran into this problem and the solutions from above didn't work for me. But I found another solution that did the trick, to use the Edit event of the Grid to attach event handler to the Deactivate event of the Window.

Grid events:

.Events(e => {
    e.DataBound("onDataBound");
    e.Edit("onEdit");
})

Grid event handlers:

function onDataBound(e) {
    //Conditional formatting on DataBound
    formatGridRows();
}


function onEdit(e) {
    //Bind deactivate event to the Popup window
    e.container.data("kendoWindow").bind("deactivate", function () {
        formatGridRows();
    })
}

function formatGridRows() {
    $("#Grid tbody tr").each(function () {
        grid = $("#Grid").data("kendoGrid");
        dataItem = grid.dataItem($(this));

        //Conditionally format the current row
        if (dataItem.Discontinued) {
            $(this).find(":nth-child(3):first").css("background", "red");
        }
    })
}

Here's the source: http://www.telerik.com/forums/cancel-popup-clears-grid-background-color