How do you make a cell/dataitem fully dirty?

[Richard]

Hello everyone

I have the following bound column set up:

  columns.Bound(site => site.SiteHasBin).ClientTemplate("#=dirtyField(data,'SiteHasBin')# #:SiteHasBin#").ClientHeaderTemplate("<a class='k-link'>Bin Present? - Select all</><input style='margin-left:10px;' id='checkAll' type='checkbox' onclick='checkAll(this)' />").Sortable(false);
   

With the associated js:

function dirtyField(data, fieldName) {
    if (data.dirty && data.dirtyFields[fieldName]) {
        return "<span class='k-dirty'></span>"
    }
    else {
        return "";
    }
}


function checkAll(input) {
    var grid = $("#gridBins").data("kendoGrid");
    var items = grid.items();
    items.each(function () {
        var dataItem = grid.dataItem(this);
          if (dataItem.SiteHasBin != input.checked) {
              dataItem.SiteHasBin = input.checked;
        }
        dataItem.dirty = true;
    })
    grid.saveChanges();
    grid.dataSource.sync();
}

However, I cannot for the life of me get the cell into it's dirty state properly which would then allow me to use the Save functionality.

As you can see from the above. It updates the values accordingly but unlike single clicking, doesn't dirty the cell / data item.

Could someone point me in the right direction please?

Rich

 

 

[Tsvetomir]

Hi, Richard,

I have investigated the provided code snippets and I have noticed that at the end of the checkAll() function, the saveChanges() and the sync() methods are called. What will they do is that they will save the current state of the grid. This can be verified by the loading spinner shown after clicking on the checkbox.

Therefore, the new values of the fields will be true and since they are already saved, they will not be dirty any more. 

If you would like to keep the dirty state of the fields and show the indicator, you should call the refresh method of the grid instead of saveChanges():

grid.refresh();

Also, make sure that you have added the respective field to the dirtyFields collection of the data item:

function checkAll(input) {
    var grid = $("#gridBins").data("kendoGrid");
    var items = grid.items();
    items.each(function () {
        var dataItem = grid.dataItem(this);
          if (dataItem.SiteHasBin != input.checked) {
              dataItem.SiteHasBin = input.checked;
        }
        dataItem.dirty = true;
        dataItem.dirtyFields = {SiteHasBin: true}
    })
    grid.saveChanges();
    grid.dataSource.sync();
}

This would cause the grid to rerender its template and will repaint the cells - hence, the dirty indicator should be shown accordingly.

 

Kind regards,
Tsvetomir
Progress Telerik

[Richard]

Hello Tsvetomir

Whilst I am no longer hitting the async _Update ActionResult  in the controller (yay!), the dirty css class isn't being added to the cell:

 

Here is my code now

function checkAll(input) {
    var grid = $("#gridBins").data("kendoGrid");
        var items = grid.items();
        items.each(function () {
            var dataItem = grid.dataItem(this);
            if (dataItem.SiteHasBin != input.checked) {
                dataItem.SiteHasBin = input.checked;
            }
            dataItem.dirty = true;
        })
        grid.refresh();
}

I'm just wondering if it's because it's an async call it's not repainting the cells ?

Further to this, is there an event I can tap into in order to reset the "Select all" checkbox when Cancel Changes is clicked?

 

[Tsvetomir]

Hi Richard, I have modified my answer so that it resembles the last part needed to mark a field as dirty.