Telerik Kendo UI Grid MVC - 以编程方式取消编辑

Question

在编辑网格期间，我需要验证数据输入，如果验证失败，我需要将坏数据恢复到未更改的状态，这样它就不会被保存（类似于使用重置按钮，但是仅针对正在编辑的当前行...这是一个批量编辑网格）。

使用下面的 javascript 代码，我可以识别问题，发出警报，但在用户接受警报后，他们仍然可以单击“保存”按钮，它会以这种方式保存，但数据不正确。

为了解决这个问题，您会看到我尝试将 e.values 和 e.model 设置为 0，但它不起作用（不会引发错误，它只是不会更改网格中的值）。

也许我需要识别 DOM 元素并直接更改它的值，但我找不到如何从 e 对象中检索 DOM 元素。

function beforeCartonPackUpdates(e) {
    if (e.values.QtyToPack > e.model.OrderedQty) {
        alert("ERROR! You cannot pack more than was ordered.");
        e.model.set("QtyToPack", 0);
        e.values.QtyToPack = 0;
        return false;
    }

    if (e.values.QtyToPack > e.model.RemainingToPack) {
        alert("Warning! You are packing more than is available.");
        return true;
    }
}

@(Html.Kendo().Grid<OTIS.AppServ.OrderMgmt.ViewModels.ShipOrderDetailViewModel>()
    .Name("ShipOrderDtlsGrid")
    .HtmlAttributes(new { style = "width:100%;" })
    .Resizable(resize => resize.Columns(true))
    .Columns(columns =>
    {
        columns.Bound(l => l.Id).Hidden();
        columns.Bound(l => l.OrderHeaderId).Hidden();
        columns.Bound(l => l.StatusId).Hidden();
        columns.Bound(l => l.ItemId)
            .ClientTemplate("<a href='" +
                                    Url.Action("Edit", "ManageItems", new { area = "InventoryMgmt" }) +
                                    "/#= ItemId #'" +
                                " target='_blank'>#= ItemDescription #</a>"
                            )
            .ClientFooterTemplate("#=kendo.format('Line Count: {0:n0}', count)#");
        columns.Bound(l => l.OrderedQty)
            .Title("Ord")
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        columns.Bound(l => l.BackorderedQty)
            .Title("B/O")
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        columns.Bound(l => l.PickedQty)
            .Title("Pick")
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        columns.Bound(l => l.PackedQty)
            .Title("Pack")
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        columns.Bound(l => l.RemainingToPack)
            .Title("Remain")
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        columns.Bound(l => l.QtyToPack)
            .HeaderHtmlAttributes(new { style = "text-align:right;" })
            .HtmlAttributes(new { @class = "editable", style = "text-align:right;" })
            .FooterHtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.format('{0:n2}', sum)#");
        //columns.Command(command =>
        //    {
        //        command.Edit();
        //        command.Destroy();
        //    }).Width(180);
    })
    .Editable(editing => editing.Mode(GridEditMode.InCell))
    .Events(events =>
    {
        //events.SaveChanges("afterCartonPackUpdates"); //fires BEFORE saving - good place to do validation
        events.Save("beforeCartonPackUpdates"); //fires Before saving, but as soon as cell value changes, better place to do validation
        events.SaveChanges("preCartonPackUpdates");//fires AFTER .Save but before calling destroy method
    }
    )
        // Add "Create" command
    .ToolBar(toolbar =>
    {
        //toolbar.Create().Text("Add Work Order Detail");
        toolbar.Template(@<text>@RenderOrderDetailsToolBar()</text>);
        //toolbar.Custom().Text("<span class='k-icon k-cancel'></span>Cancel</text>").Url("##_").HtmlAttributes(new { @class = "k-grid-cancel-changes" });
        //toolbar.Custom().Text("<span class='k-icon k-update'></span>Pack</text>").Url("##_").HtmlAttributes(new { @class = "k-grid-save-changes" });
        //toolbar.Save();
    })

    .DataSource(dataSource => dataSource
        .Ajax() // Specify that the data source is of ajax type
        .Aggregates(aggregates =>
        {
            aggregates.Add(x => x.ItemId).Count();
            aggregates.Add(x => x.OrderedQty).Sum();
            aggregates.Add(x => x.PickedQty).Sum();
            aggregates.Add(x => x.RemainingToPack).Sum();
            aggregates.Add(x => x.QtyToPack).Sum();
            aggregates.Add(x => x.PackedQty).Sum();
            aggregates.Add(x => x.BackorderedQty).Sum();
        })
        .Batch(true)
        .Model(model =>
        {
            model.Id(c => c.Id);
            model.Field(c => c.OrderHeaderId).DefaultValue(Model.Id);
            model.Field(c => c.UnitCost).Editable(false);
            model.Field(c => c.ItemDescription).Editable(false);
            model.Field(c => c.OrderedQty).Editable(false);
            model.Field(c => c.PickedQty).Editable(false);
            model.Field(c => c.PackedQty).Editable(false);
            model.Field(c => c.BackorderedQty).Editable(false);
        }
        )
        .Sort(sort =>
        {
            sort.Add(c => c.ItemDescription);
        })

        .Events(events =>
        {
            events.Error("KendoGridErrors");// Specify a handler for the error event
            events.RequestEnd("onPackCartonGridComplete");
        }
        )
        // CRUD configuration -->
        //.Create(create => create.Action("Grid_SaveOrUpdate", "ManageWorkOrders", new { area = "OrderMgmt" }).Type(HttpVerbs.Post))
        .Read(read => read.Action("GetShipOrderDetails", "ManageShipOrders", new { area = "OrderMgmt", intOrderHeaderId = @Model.Id })// Specify the action method and controller name
                .Type(HttpVerbs.Get)
        )
        .Update(update => update.Action("CreateCartonAndPack", "ManageShippingContainers", new { area = "OrderMgmt" }).Type(HttpVerbs.Post))
        //.Destroy(destroy => destroy.Action("Grid_Delete", "ManageWorkOrders", new { area = "OrderMgmt" }).Type(HttpVerbs.Post))
        // <-- CRUD configuration
    )
    .Sortable()
)    

Answer 1

想通了...最后很简单。只需输入e.preventDefault();

 function shipOrderDtlsGrid_OnSave(e) {
    if (e.values.QtyToPack > e.model.RemainingToPack) {
        e.preventDefault();
        alert("ERROR! You cannot pack more than is Remaining To Pack.");
        return;
    }
}