Dojo Data Grid – Part 12: Highlighting Edited Rows

If you’ve implemented editable columns in your grid, it would be helpful to let users know which rows have been edited but not yet saved. In this post, I’ll show you how.

Dojo Data Grid Series

• Part 1: Concepts and Default Features
• Part 2: Creating a REST Service
• Part 3: Creating Your First Grid
• Part 4: Additional Grid Features
• Part 5: Grid Column Features
• Part 6: Reordering Columns
• Part 7: Sorting
• Part 8: Opening Documents
• Part 9: Multi-Row Entries
• Part 10: Full-Text Searching and Field-Specific Filtering
• Part 11: Editable Columns

Row Change Event

In a previous post, I talked about the onStyleRow event that’s available to the grid. (Refer to that post for instructions on the proper way to add the event code.)

By inspecting the properties of the arguments automatically made available to that event, I found that the node has an onchange event handler available, so we can use that to track changes to the data.

Unfortunately, it is not cell-specific — as far as I can tell, you can only get a handle to the entire row.

Quick and Dirty Solution

The simplest way to use this logic is to add a function to the onchange event of the row node, from code within the onStyleRow event.

var row = arguments[0];
row.node.onchange = function () {
  row.node.style.backgroundColor = ' background-color:yellow;';
}

Now, when you edit a field in the grid, it will automatically highlight the row in yellow.

There are two problems with this method:

1. It does not persist. Once you scroll far enough down in the grid, the style of that row is lost and will not be maintained when you scroll back, because the row is re-drawn and does not remember the style you added.
2. It does not get cleared when you save or revert the changes in the grid. In my opinion, it makes the most sense to highlight a changed row and show that it has not yet been saved.

A Better (Persistent) Solution

To better keep track of the changes in the grid, you can use a global javascript variable on the page to keep track of an array of updated rows and refer to that array when styling the rows in the grid.

First, add an output script control to the page and set it’s code to this:

var editedRows = [];

Then, update the onStyleRow event code to (a) keep track of the row index when updated and (b) check whether the current row has been updated.

var row = arguments[0];

// If this row has been changed, highlight it
if (dojo.indexOf(editedRows, row.index) > -1) {
  row.customStyles += ' background-color:yellow;';
}

// Keep track of the changed row
row.node.onchange = function () {
  editedRows.push(row.index);
}

Since the list of updated rows is now in a global variable, it will persist, regardless of how much the user scrolls. (It will not persist if the entire page is refreshed, but neither would any unsaved changes.)

Lastly, update the Save and Revert buttons to clear that array and re-draw the grid, in order to force the highlighting to be removed once the changes are saved or reverted (because there’s nothing left to highlight at that point.)

This is what the Save button code now looks like:

// Reset the list of edited rows to clear the styles
editedRows = [];
var args = {onError: function() {alert('error!');}};
restViewItemFileService.save(args);

//Refresh the grid
restViewItemFileService.close();
dijit.byId('#{id:djxDataGrid1}')._refresh();

Much better!