How to color the columns of sap.ui.table.Table ?

[Former Member]

Hi,

I am developing a UI5 application , I need to color the columns of the table based on the condition .

Here I need to color the columns based on the Editable value.

Thanks,

Sandeep

Code :

var oPriceProcedureTable = null;
oPriceProcedureTable = new sap.ui.table.Table({
       id: "table-quotation",
       selectionMode: sap.ui.table.SelectionMode.Single,
	visibleRowCount: 8
});
			
oView.getModel().read(serviceURL, {
	success: function(oData) {
	    var rowData = oData.results;
            var Staic_Feilds = [{
		"Fieldname": "Kschl",
		"Edit": false,
		"ScrtextS": "Condition Type"
	    }, {
	        "Fieldname": "Kbetr",
		"Edit": true,
		"ScrtextS": "Unit Price"
	    }, {
		"Fieldname": "Kpein",
		"Edit": false,
		"ScrtextS": "Per"
	    }, {
		"Fieldname": "Kmein",
		"Edit": false,
		"ScrtextS": "Price Unit"
	    }, {
		"Fieldname": "Kwert",
		"Edit": false,
		"ScrtextS": "Total"
            }];

	    var Column_name = Staic_Feilds;
            var oModel = new sap.ui.model.json.JSONModel();
		      oModel.setData({
			    columns: Column_name,
			    rows: rowData
		      });
            that.oPriceProcedureTable.setModel(oModel);
            that.oPriceProcedureTable.bindColumns("/columns", function(sId, oContext) {
                  var columnName = oContext.getObject().Fieldname;
		  var Editable = oContext.getObject().Edit;
		  var ScrtextS = oContext.getObject().ScrtextS;
                  return new sap.ui.table.Column({
			label: ScrtextS,
			template: new sap.ui.commons.TextField({
			   value: {
				path: columnName
			   },
			   editable: Editable,
			   formatter: function(Editable) {
 			        if (Editable === "true") {
				    this.addStyleClass("yellow");
				} else {
				    this.addStyleClass("cyan");
			        }
			        return Editable;
			   }
		 })
	});
});
that.oPriceProcedureTable.bindRows("/rows");

[Former Member]

Do you have a corresponding CSS that tells the DOM to change the background color to the required color.

.yellow {       background-color: yellow;}


.cyan {
       background-color: cyan;
}

[Former Member]

Yes . I have the css code for this.

[Former Member]

So, to start debugging,

1. Could you please check if your classes ("yellow" & "cyan") are added to rendered HTML at the right position. (Right click on the table cell where you want to see a background color & do an inspect element. You should see the classes you are trying to add displayed in the control attributes)
2. Check also if your css classes are hooked correctly with the css code