sap.m.table dynamic cell color (whole cell)

[JohnPaulLiberal]

Hi Gurus!

We have a sap.m.table with 3 columns in my detail.view.xml:

<html:style type="text/css">
  td[data-colorCode="Overdue"] {
     background-color: pink !important;
   } 
   .cyan {  background-color : rgba(0, 255, 255, 0.28) } 
</html:style>
<Table id="meetingDetailTable" items="{screenModel>/meetingTable}">
  <columns>
	<Column id="meetTabIBpId"><header><Label text="{i18n>meetTabIBpId}"  /></header></Column>
	<Column id="meetTabIDevId"><header><Label text="{i18n>meetTabIDevId}" /></header></Column>
	<Column id="meetTabIDevDesc"><header><Label text="{i18n>meetTabIDevDesc}" /></header></Column>
  </columns>
  <items>
        <ColumnListItem id="meetingDetailTableList">
	  <cells>
	     <ObjectIdentifier 
		text="{screenModel>BusinessProcessId}"
		title="{screenModel>BusinessProcessDesc}"/>
	  </cells>
	  <cells>
		<Text
	         	text="{screenModel>ExtId}" />
	  </cells>
	  <cells>
		<Text
			text="{screenModel>DevelopmentDesc}" />
	  </cells>
        </ColumnListItem>
   </items>
</Table>

Then we added some columns dynamically:

var oModelData = oController.getModelData("screenModel");
var oMeetingTab = oController.byId("meetingDetailTable");
var oMeetinglist = oController.byId("meetingDetailTableList");


for (var i=0; i < oModelData.columns.length; i++){
    if (oModelData.columns[i].colType !== "Fixed"){
		var oCol = new sap.m.Column({
			label:  oModelData.columns[i].colId,
			header : new sap.m.Label({
				text : oModelData.columns[i].colName
			})
           });

        oMeetingTab.addColumn(oCol);
	var oCell = new sap.m.Label(
		{	
			id : "cell" + oModelData.columns[i].colId,
			text : {
				parts: [{
	                        		"path": oModelData.columns[i].colId,
						"model": "screenModel"
				}],
				formatter: function(vCell) {
					this.addStyleClass("cyanb");
					return vCell;
				},textAlign:"Center"
			}
                }
        );
	oMeetinglist.addCell(oCell);
    }
}
oMeetingTab.bindItems("screenModel>/meetingTable",oMeetinglist);

This is the output:

We want to change the whole cell background, like this:

Thanks in advance,

John.

[BhargavaReddy · Accepted solution]

Hello John,

Hope below code will help you.

var table = sap.ui.getCore().byId("__xmlview1--idProductsTable");

var cell = table.getItems()[0].getCells()[3];

var DomRef = cell.getDomRef();

$(DomRef.parentNode).addClass("backgroundRed");

Kind Regards,

Bhargava

[JohnPaulLiberal · Accepted solution]

Hi! Thanks for the response.

It Worked!!

We've added the logic into the update event of the model, and attached a custom data parameter to de cell.