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

6 posts, 0 answers
  1. David
    David avatar
    7 posts
    Member since:
    Jul 2013

    Posted 15 Aug 2013 Link to this post

    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.

    .DataSource(dataSource => dataSource
        .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);
        .Read(read => read.Action("_Read", "Home"))
        .Update(update => update.Action("_Update", "Home"))
        .Events(events =>
    .Columns(columns =>
        columns.Bound(a => a.Reference).Title("Reference");
        columns.Bound(a => a.Narrative).Title("Narrative");
            .ClientTemplate("<input type='checkbox' #= Include ? checked='checked': '' # onclick='updateAmount(this, \"#= ID#\")' />");
        columns.Bound(a => a.Amount).Title("Amount");
        .Events(events =>
    .ToolBar(toolbar =>
    .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);
  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 19 Aug 2013 Link to this post

    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:

    Kind Regards,
    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Samra
    Samra avatar
    13 posts
    Member since:
    Feb 2017

    Posted 04 Jul in reply to Vladimir Iliev Link to this post

    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?

  4. Konstantin Dikov
    Konstantin Dikov avatar
    2120 posts

    Posted 06 Jul Link to this post

    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.

    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. James
    James avatar
    22 posts
    Member since:
    Feb 2015

    Posted 06 Jul Link to this post

    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");
                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;
                                dataItem.dirty = true;
                            if (doBP) {
                                var bpCell = row.find(".rowBP");
                                dataItem["BusinessPurpose"] = bpVal;
                                dataItem.dirty = true;
  6. Samra
    Samra avatar
    13 posts
    Member since:
    Feb 2017

    Posted 06 Jul in reply to Konstantin Dikov Link to this post

    Thanks Konstantin,

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



Back to Top