Skip to Content
0
Former Member
Feb 20, 2017 at 07:11 AM

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

3812 Views

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");