Kendo mvc grid batch mode dataItem.set clears the dirty flags - asp.net-mvc

Question

When I change an amount, tick the checkbox etc, it triggers some javascript, which includes some code to set another field on the dataItem, so dataItem.Set ("Amount", 0);
I can set it using dataItem.Amount = 0; , but then I also need to update the contents of the cell. When I do set I obviously don't want the dirty flag clearing from other cells, as I haven't clicked 'Save changes' yet, so they are still 'dirty'.
I can't find any documentation on the .set method.
Any advice would be appreciated.
#(Html.Kendo().Grid<OurViewModel>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(a => a.ID);
model.Field(a => a.Reference).Editable(false);
model.Field(a => a.Narrative).Editable(false);
model.Field(a => a.Include).Editable(true);
model.Field(a => a.Amount).Editable(true);
})
.Batch(true)
.Read(read => read.Action("_Read", "Home"))
.Update(update => update.Action("_Update", "Home"))
.ServerOperation(false)
.Events(events =>
{
events.Change("onDataSourceChange");
})
)
.Columns(columns =>
{
columns.Bound(a => a.Reference).Title("Reference");
columns.Bound(a => a.Narrative).Title("Narrative");
columns.Template(#<text></text>).Title("Include?")
.ClientTemplate("<input type='checkbox' #= Include ? checked='checked': '' # onclick='updateAmount(this, \"#= ID#\")' />");
columns.Bound(a => a.Amount).Title("Amount");
})
.Events(events =>
{
events.Save("onSave");
events.SaveChanges("onSaveChanges");
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
and the JS.
function updateAmount(cb, ourID) {
var checked = $(cb).is(':checked');
var grid = $('#Grid').data().kendoGrid;
var dataItem = grid.dataSource.get(ourID);
dataItem.set("Include", checked);
if (checked) {
dataItem.set("Amount", dataItem.get("OriginalAmount"));
} else {
dataItem.set("Amount", 0);
}
}

Answer 1

When calling the set method on an observable object (Note: Each dataItem in the dataSource in converted to a kendo ObservableObject when loaded) any widgets that our bound to the dataItem will be updated, in this case your grid is the bound widget.
If you set the value directly (i.e. dataItem.Amount = 0) none of the observable object's binding events will trigger and the grid (or any other widgets bound to the dataItem) will NOT update. You should always use set when modifying fields of an observable object in order to keep the UI up to date.
Within the dataSource, there are no dirty flags for the individual fields in the dataItem. The dataItem itself will have a field named "dirty" which will be set to true whenever ANY of its fields change. Changing more than 1 field will just keep setting dirty = true for the entire dataItem. You don't need to worry about tracking modified fields. Once a row is dirty it will stay dirty until you save the data.
When you save the contents of the grid (a.k.a. sync the dataSource) any (and only) rows with dirty = true will be sent to the server. Once saved, the dirty flags will be removed. On that note, you will want to refrain from using "dirty" as a table property in your database.
The kendo documentation at is pretty complete but I would highly recommend tracing through the kendo javascript code to really learn it. One last note, I started with the Kendo MVC approach hoping to leverage by C# knowledge but soon found it much easier to just code all the client side in JavaScript. All your C# code gets converted to rather verbose JavaScript anyway each time the server it hit. This puts unnecessary load on the server and makes client side debugging harder IMO.