Telerik Kendo UI Grid MVC - Programmatically Cancel Edits - kendo-ui

Question

During editing of the grid, I need to validate the data input and if it fails validation, I need to revert the bad data back to an unchanged state so it won't get saved (akin to using the Reset button, but just for the current row being editing...this is a batch editing grid).
Using the javascript code below, I can identify the problem, throw up the alert, but after the user accepts the alert, they could still just click the Save button and it would save that way, with the incorrect data.
To combat this, you'll see I try to set the e.values and e.model to 0, but it is not working (no error is thrown, it just doesn't change the value in the grid).
Maybe I need to identify the DOM element and change it's value directly, but I couldn't find how to retrieve the DOM element from the e object.
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

Figured it out...was simple in the end. Just needed to put in the 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;
}
}