This is a migrated thread and some comments may be shown as answers.

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

5 Answers 388 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 15 Aug 2013, 02:33 PM
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);
            }
       }

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 19 Aug 2013, 02:19 PM
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
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Samra
Top achievements
Rank 1
answered on 05 Jul 2017, 12:32 AM

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?

0
Konstantin Dikov
Telerik team
answered on 06 Jul 2017, 02:32 PM
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
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.
0
James
Top achievements
Rank 1
answered on 06 Jul 2017, 06:42 PM

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();
0
Samra
Top achievements
Rank 1
answered on 07 Jul 2017, 01:25 AM

Thanks Konstantin,

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

Regards,

Samra

Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Samra
Top achievements
Rank 1
Konstantin Dikov
Telerik team
James
Top achievements
Rank 1
Share this question
or