Search code examples
kendo-uikendo-gridkendo-asp.net-mvc

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


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();
}

Solution

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