1

I have a treeTable with editable cells within the expanded rows. The editable cells get a dirty flag after editing (in the example the background color is set to red).

The problem i'm running into is that i found no certain way to update the dirty flag on expand/collapse (edited cells get the css class 'edited-cell').

At the moment the code looks like that:

// each editable textfield gets a Listener
textField.attachLiveChange(
   var source = oEvent.oSource;
   ...
   jQuery('#' + source.getId()).addClass(EDITED_CELL_CLASS, false)
   // list with cell ids, e.g. "__field1-col1-row1"
   DIRTY_MODELS.push(model.getId()) //*** add also binding context of row
)

// the table rows are updated on toggleOpenState
new sap.ui.table.TreeTable({
   toggleOpenState: function(oEvent) {
      ...
      this.updateRows() // see function below
   }
})

// update Rows function is also delegated
oTable.addDelegate({ onAfterRendering : jQuery.proxy(this.updateRows, oTable)});

//http://stackoverflow.com/questions/23683627/access-row-for-styling-in-sap-ui5-template-handler-using-jquery
// this method is called on each expand/collapse: here i can make sure that the whole row has it's correct styling...
// but how to make sure that special cells are dirty?
function updateRows(oEvent) {
  if (oEvent.type !== 'AfterRendering'){
    this.onvscroll(oEvent);
  }
  var rows = this.getVisibleRowCount();
  var rowStart = this.getFirstVisibleRow();
  var actualRow;
  for (var i = 0; i < rows; i++){
    actualRow = this.getContextByIndex(rowStart + i); //content
    var row = this.getRows()[i]
    var obj = actualRow.getObject()
    var rowId = row.getId()
    updateStyleOfRows(obj, rowId, actualRow)
    updateDirtyCells(rowId) //*** how to get the binding context in this function???
  }
};

// update Dirty Cells in function updateRows():
function updateDirtyCells(rowId){
   for (var i = 0; i < DIRTY_MODELS.length; i++){
      var dirtyCellId = DIRTY_MODELS[i]
//*** make sure that only the correct expanded/collapsed rows will be updated -> depends on the bindingContext of the row
      jQuery('#' + rowId).find('#' + dirtyCellId + '.editable-cell').addClass(EDITED_CELL_CLASS, false)
   }
}

This doesn't work correctly, because the ids of the cells change on each layout render (e.g. collapse/expand rows). Please see attached image. Let me know if i should provide more information.

enter image description here

owe
  • 4,890
  • 7
  • 36
  • 47
  • 1
    Have you tried to use the binding context instead of the TextField id as key for your dirty list? [`textField.getBindingContext()`](https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.base.ManagedObject.html#getBindingContext) should return an object with the bindingpath of the row. – schnoedel Feb 15 '16 at 20:08
  • hey schnoedel, thanks for your comment. You're right i can use the bindingpath to get the row, But a row has a certain amount of columns, so the binding context isn't enough, because a row can have several edited cells. i edited my code...i have to manage somehow a binding between the LiveChangeListener for a special textfield and the updateRows() function to update all dirtyMarkedCells after collapse/expand. Tell me if you need more samplecode or something else. Thanks a lot! – owe Feb 22 '16 at 13:19
  • see my comments starting with "//***" -> Let me know if you need more information from me. – owe Feb 22 '16 at 13:33

0 Answers0