如何防止取消事件更改我的网格行颜色？

Question

我搜索数据，然后绑定到我的网格。在网格的

databound

事件中，我根据单元格的值更改行背景颜色。这工作正常。但是，当我单击网格中的“编辑”按钮，然后单击“取消”按钮时，网格不再设置背景颜色。我尝试在

databound

事件中调用

Cancel

事件，但是不起作用。如何防止取消事件更改我的网格颜色？

网格

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

数据绑定事件

  //change grid color
   function dataBound(e) {

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

取消活动

     //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

只需在取消事件中刷新网格即可。它将再次触发 onDataBound 事件。我有同样的问题并这样解决：

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 2

您可以在

grid.cancelRow()

中使用

cancel enent

，然后刷新网格。

Answer 3

如果您不想刷新网格而是在事件完成后运行代码，则可以在取消事件中使用 setTimeout() 。

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

请参阅 Telerik 的回答： https://www.telerik.com/forums/grid-cancel-event

Answer 4

我也遇到了这个问题，上面的解决方案对我来说不起作用。 但我找到了另一个解决方案，使用网格的编辑事件将事件处理程序附加到窗口的停用事件。

网格事件：

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

网格事件处理程序：

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

来源如下： http://www.telerik.com/forums/cancel-popup-clears-grid-background-color

Answer 5

function onCancel(e) {
    var firstClass = $('tr[data-uid="' + e.model.uid + '"]').attr('class').split(' ').shift();
    setTimeout(function(){
        $('tr[data-uid="'+e.model.uid+'"]').addClass(firstClass)
    })
}

这对我有用，尽管我必须使用第一个类，而不是最后一个，如解决方案中所述。

这是来源：https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-custom-styles-cancel