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

[David]

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 <td> 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. It's as though it is firing other events off.

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

[Vladimir Iliev]

Hi David,

Basically current behavior is expected as when you use the set method to change a property in the model, the Grid rows are redrawn and dirty flags are removed (preserving the dirty flags is not supported out of the box). In current scenario I would suggest to choose one of the following options:

• Implement custom solution to preserve dirty flags - you can use this demo in our CodeLibrary as a baseline
• Extend current solution to first open a cell for editing (using editCell method) and then use the set method in order to avoid redrawing the Grid rows

Kind Regards,
Vladimir Iliev
Telerik

[Samra]

Hi Vladimir,

it seems that dataItem.set() triggers another save event for the second field that is being set programmatically, which i donot want. So i do

dataItem[colName] = x;

and later grid.refresh();

Is there a better way of doing it?

[Konstantin Dikov]

Hello Samra,

The save event will be triggered if you have set the AutoSync property to "true". However, using the "set" method will render the items in the Grid once again and you will lose the dirty indicator. Another approach that you could try is to the change the value without the set method, set the dirty property of the item to true and manually update the value in the cell with jQuery.


Regards,
Konstantin Dikov
Progress Telerik

[James]

I am doing something similar, multi-selecting several rows, popping open a form on button click that allows me to update cell values in all selected rows (think batch update of a column value). Here is what I did and hope it helps (ccVal and bpVal are taken from my modal form fields):

var doCC = $("#chkCostCenter").is(":checked");
var doBP = $("#chkPurpose").is(":checked");

var dirtySpan = "<span class='k-dirty'></span>";
        var grid = $("#MyGrid").data("kendoGrid");
        $("#MyGridtbody").find("tr").each(
            function () {
                var row = $(this);
                var doUpdate = $(this).hasClass("k-state-selected");
                if (doUpdate === true) {
                    var dataItem = grid.dataItem(row);
                    if (doCC) {
                            var ccCell = $(this).find(".rowCC");
                            dataItem["CostCenter"] = ccVal;
                            $(ccCell).text(ccVal);
                            $(ccCell).addClass("k-dirty-cell");
                            $(ccCell).prepend(dirtySpan);
                            dataItem.dirty = true;
                        }

                        if (doBP) {
                            var bpCell = row.find(".rowBP");
                            dataItem["BusinessPurpose"] = bpVal;
                            $(bpCell).text(bpVal);
                            $(bpCell).addClass("k-dirty-cell");
                            $(bpCell).prepend(dirtySpan);
                            dataItem.dirty = true;
                        }
                }
            });

        grid.clearSelection();

[Samra]

Thanks Konstantin,

That bit of info was just what I was missing :)

Regards,

Samra