Skip to Content
0

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

Feb 20, 2017 at 07:11 AM

97

avatar image

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");
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Murali Lakshmanan Feb 20, 2017 at 07:41 AM
0

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;
}
Show 2 Share
10 |10000 characters needed characters left characters exceeded

Yes . I have the css code for this.

0

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
background.png (590.4 kB)
background.png (590.4 kB)
0