$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

Dynamically set background color for table cell.

Good morning to all.

I have a sap.ui.table dynamically created.

In my view i have only:

<Table id="tsTable" visibleRowCount="1" title="Elenco task" showNoData="false">
</Table>

I adding only columns based on days of current minth in controller. Another function called on click button add one row at a time after.

In my controller i have the function to create header for my table:

createEmptyTasksTable: function(month, year){
try {
var oTable = this.byId("tsTable");

//Tasks column

this.columnData.push({columnName : "Tasks"});

// First and last day of current month:
var firstDay = this.firstDayOfMonth(year, month);
var lastDay = this.lastDayOfMonth(year, month);

//Month's day array

while (firstDay <= lastDay) {
var day = firstDay.getDate();
this.columnData.push({columnName : day.toString()});
var newDate = firstDay.setDate(firstDay.getDate() + 1);
firstDay = new Date(newDate);
}

//Tabvle model:
this.oTableModel = new JSONModel({
rows: this.rowData,
columns : this.columnData
});
oTable.setModel(this.oTableModel);
//Controller:
var controller = this;

oTable.bindColumns("/columns", function(sId, oContext) {
//Table header:
var oColumn = new sap.ui.table.Column();
var columnName = oContext.getObject().columnName;
var columnWidth = "40px";
var textColumnAlign = "Center";

if(!controller.isDay(columnName)){
//Task column : not editable
columnWidth = "400px";
textColumnAlign = "Left";
var label = new sap.ui.commons.Label({text: columnName, textAlign: textColumnAlign});
var template = new sap.ui.commons.TextView({text:"{" + columnName + "}", textAlign: textColumnAlign});
oColumn.setLabel(label);
oColumn.setTemplate(template);
oColumn.setWidth(columnWidth);
} else {
var label = new sap.ui.commons.Label({text: columnName, textAlign: textColumnAlign});
oColumn.setLabel(label);
oColumn.setWidth(columnWidth);

//If working day:
if(controller.isWorkingDay(columnName, month, year)){
//Editable colums for dayly effort:
var template = new sap.ui.commons.TextField({value:"{" + columnName + "}", textAlign: textColumnAlign});
oColumn.setTemplate(template);

//Header Menù:
var oCustomMenu = new sap.ui.unified.Menu();
//Menù function:
var handleSelect = function(oEvent){
var id = oEvent.getParameter("item").getId();
controller.selectedDates = [];
controller.onOpenDialog();
};
//Menù item:
var menuItem = new sap.ui.unified.MenuItem({
text : "Copia su più giorni",
icon: "sap-icon://duplicate"
}).attachSelect(handleSelect);

oCustomMenu.addItem(menuItem);
oColumn.setMenu(oCustomMenu);
} else {
var template = new sap.ui.commons.TextView().bindProperty("text", columnName,
function(cellValue){
var cellId = this.getId();
$("#"+cellId).parent().parent().css("background-color","red");
return cellValue;
});
oColumn.setTemplate(template);
}
}
return oColumn;
});
oTable.bindRows("/rows");
} catch (err) {
this.logger.error(err);
this.logger.debug(err.stack);
}
},

Now....

1°) How i can set background color for non working day header cells?

2°) When i add new row to table, then i view the cell of non working day in the row red, but if i add another new row the cells in new row and in previous rows less red background color!

The function to add new row is :

addTask: function(){
try {
var oTable = this.byId("tsTable");
var row = {};
var index = this.rowData.length;
var columns = this.columnData;

columns.forEach(function(value, i){
var columnName = value.columnName;
if(columnName.length > 2){
row[columnName] = "Task " + index.toString() + "\nDescrizione Task" + index.toString();
}else{
row[columnName] = "0";
}
});
this.rowData.push(row);
oTable. setVisibleRowCount(this.rowData.length);
oTable.bindRows("/rows");
} catch (err) {
this.logger.error(err);
this.logger.debug(err.stack);
}
},

Can someone help me?
Thanks to all those acting!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    Nov 28, 2016 at 05:14 PM

    I resolve!

    I use sap.ui.core.HTML instead of sap.ui.commons.TextField in template for colums that must display in different mode.

    My code now is:

    createEmptyTasksTable: function(month, year){
    try {
    var oTable = this.byId("tsTable");

    //Colonna dei tasks:
    this.columnData.push({columnName : "Tasks"});

    // Primo ed ultimo giorno del mese corrente:
    var firstDay = this.firstDayOfMonth(year, month);
    var lastDay = this.lastDayOfMonth(year, month);

    //Colonne dei giorno del mese:
    while (firstDay <= lastDay) {
    var day = firstDay.getDate();

    this.columnData.push({columnName : day.toString()});

    var newDate = firstDay.setDate(firstDay.getDate() + 1);
    firstDay = new Date(newDate);
    }

    //Aggiunta colonne alla tabella:
    this.oTableModel = new JSONModel({
    rows: this.rowData,
    columns : this.columnData
    });
    oTable.setModel(this.oTableModel);

    //Controller per richiamo funzioni nell'evento del menù di colonna:
    var controller = this;

    oTable.bindColumns("/columns", function(sId, oContext) {
    //Creazione intestazione tabella:
    var oColumn = new sap.ui.table.Column();
    var columnName = oContext.getObject().columnName;
    var columnWidth = "40px";
    var textColumnAlign = "Center";

    if(!controller.isDay(columnName)){
    //Colonna con codice e descrizione del task : non editabile
    columnWidth = "400px";
    textColumnAlign = "Left";
    var label = new sap.ui.commons.Label({text: columnName, textAlign: textColumnAlign});
    var template = new sap.ui.commons.TextView({text:"{" + columnName + "}", textAlign: textColumnAlign});
    oColumn.setLabel(label);
    oColumn.setTemplate(template);
    oColumn.setWidth(columnWidth);
    }
    else
    {
    //Check giorno lavorativo:
    if(controller.isWorkingDay(columnName, month, year)){
    var label = new sap.ui.commons.Label({text: columnName, textAlign: textColumnAlign});
    oColumn.setLabel(label);
    oColumn.setWidth(columnWidth);

    //Colonne editabili per inserimento effort giornaliero:
    var template = new sap.ui.commons.TextField({value:"{" + columnName + "}", textAlign: textColumnAlign});
    oColumn.setTemplate(template);

    //Creazione ed aggiunta Menù:
    var oCustomMenu = new sap.ui.unified.Menu();
    //Funzione richiamata dal menù:
    var handleSelect = function(oEvent){
    var id = oEvent.getParameter("item").getId();
    controller.selectedDates = [];
    controller.onOpenDialog();
    };
    //Voce del menù:
    var menuItem = new sap.ui.unified.MenuItem({
    text : "Copia su più giorni",
    icon: "sap-icon://duplicate"
    }).attachSelect(handleSelect);
    oCustomMenu.addItem(menuItem);
    //Aggiunta menù alla colonna intestazione:
    oColumn.setMenu(oCustomMenu);
    }
    else{
    var label = new sap.ui.core.HTML({
    content: "<div class='notWorkingDayColor'>" + columnName + "</div>",
    afterRendering: function(evt){
    var cellId = this.getId();
    $("#"+cellId).parent().parent().addClass("notWorkingDayColor");
    }
    });
    oColumn.setLabel(label);
    oColumn.setWidth(columnWidth);

    var template = new sap.ui.core.HTML("Layout_" + columnName ,{
    content: "<div class='notWorkingDayColor'> </div>",
    afterRendering: function(evt){
    var cellId = this.getId();
    $("#"+cellId).parent().parent().addClass("notWorkingDayColor");
    }
    });

    oColumn.setTemplate(template);
    }
    }

    return oColumn;
    });

    oTable.bindRows("/rows");
    } catch (err) {
    this.logger.error(err);
    this.logger.debug(err.stack);
    }
    },

    And this is persistent when i resize any column or i add new row!

    Add comment
    10|10000 characters needed characters exceeded