Kendo UI Grid从命令功能更改行详细信息值，无细节崩溃

Question

我有一个带有详细模板的kendo网格，如果用户点击父行中的clear命令，我想清除它。

我设法让这个工作，但是只要我set dataItem上的值，行详细信息就会崩溃，这会导致用户失去他的位置。

function clearDetails(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    dataItem.set("City",""); // causes row detail collapse 
}

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
        },
        columns: [{
            field: "ContactName",
            title: "Contact Name",
            width: 240
        }, {
            field: "Country",
            width: 150
        }, { command: { text: "Clear", click: clearDetails }, title: " ", width: "180px" }],
        detailTemplate: kendo.template($("#myRowDetailTemplate").html())
    })
});

工作示例： https://jsbin.com/xuwakol/edit?html,js,output

有没有一种方法我仍然可以清除行细节中的值，而不会崩溃。

Answer 1

通过使用kendo网格中的dataBinding功能，我遇到了同样的问题。

基本上它会检查项目更改事件，并取消默认操作以关闭网格。这允许我继续使用set方法。

示例：

$("#grid").kendoGrid({
        dataBinding: function (e) {
            if (e.action == "itemchange") {
                e.preventDefault();
            }              
        },
    }); 
}

Answer 2

我设法通过不在dataItem上使用set方法来实现这一目标。 http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set

我刚刚更改了dataItem的值dataItem.City ="";，并在jquery选择器的帮助下清除了textarea的值。

function clearDetails(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));   
    dataItem.City ="";
    $(e.currentTarget).closest(".k-master-row").next().find("textarea[name='City']").val("");
}