<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>Table Merge Sample</title>
        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex"
        >
        </script>
		<style>
		.textStyle{
			color:#FFFFFF !important;
			text-shadow: 1px 1px 2px #333333 !important;
		}
		</style>
        <!-- XML-based view definition -->
        <script id="chartView" type="sapui5/xmlview">
<mvc:View
  controllerName="TableMerge.Main"
  xmlns:l="sap.ui.layout"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns="sap.m"
  class="viewPadding">
  <App>
  <pages>
<Page
    title="Table Merge Cells"
    class="marginBoxContent" >
    <content>
<Table
	id="ProductsTable"
    items="{
      path:'/modelData/productsData'
    }" >
    <columns>
      <Column mergeDuplicates="true" hAlign="Center">
        <header>
          <Text text="Supplier" />
        </header>
      </Column>
      <Column >
        <header>
          <Text text="Product" />
        </header>
      </Column>
      <Column hAlign="Right">
        <header>
          <Text text="Release" />
        </header>
      </Column>
    </columns>
    <ColumnListItem>
	<cells>
      <Text text="{SupplierName}" class="textStyle" />
	  <HBox>
	  <items>
	  <Text text="{Name}" />
	  <Input visible="{
		path: 'SupplierName',
		formatter: 'inputFormatter.Visible'
	  }" />
	  </items>
	  </HBox>
	  <CheckBox visible="{
		path: 'SupplierName',
		formatter: 'myFormatter.Visible'
	  }" />
	  </cells>
    </ColumnListItem>
  </Table>
    </content>
  </Page>
  </pages>
  </App>
  </mvc:View>
        </script>

        <script>
	var inputFormatter = {
  Visible: function(v) {
	if(v == "Feedback" || v == "Others"){
    return true;
	}
	else{
	return false;
	}
  }
};
	var myFormatter = {
  Visible: function(v) {
	if(v == "Feedback" || v == "Others"){
    return false;
	}
	else{
	return true;
	}
  }
};
            // Controller definition
sap.ui.controller("TableMerge.Main", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/

	onInit: function() {
	
	var dataObject = [
		{
			"ProductId": "22134T",
			"Name": "Webcam",
			"SupplierName": "Technocom",
			"Price": 59,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "P1239823",
			"Name": "Monitor Locking Cable",
			"SupplierName": "Technocom",
			"Price": 13.49,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "214-121-828",
			"Name": "Laptop Case",
			"SupplierName": "Red Point Stores",
			"Price": 78.99,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "XKP-312548",
			"Name": "USB Stick 16 GByte",
			"SupplierName": "Red Point Stores",
			"Price": 17.19,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "KTZ-12012.V2",
			"Name": "Deskjet Super Highspeed",
			"SupplierName": "Red Point Stores",
			"Price": 117.19,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "89932-922",
			"Name": "Laser Allround Pro",
			"SupplierName": "Red Point Stores",
			"Price": 39.99,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "38094020.1",
			"Name": "Flat S",
			"SupplierName": "Very Best Screens",
			"Price": 339,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "870394932",
			"Name": "Flat Medium",
			"SupplierName": "Very Best Screens",
			"Price": 639,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "282948303-02",
			"Name": "Flat X-large II",
			"SupplierName": "Very Best Screens",
			"Price": 1239,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "OP-38800002",
			"Name": "High End Laptop 2b",
			"SupplierName": "Titanium",
			"Price": 939,
			"CurrencyCode": "EUR"
		},
		{
			"ProductId": "977700-11",
			"Name": "Hardcore Hacker",
			"SupplierName": "Titanium",
			"Price": 89,
			"CurrencyCode": "EUR"
		},
		{
			"SupplierName": "Feedback"
		},
		{
			"SupplierName": "Others"
		}
	];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		sap.ui.getCore().setModel(model);
		sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject);
		
		var oHBox = this.getView().byId("oHBox");
		
		
			var oTable = this.getView().byId("ProductsTable");
	oTable.addEventDelegate({
		onAfterRendering:function(){
		var oBody = $('#__xmlview0--ProductsTable').find('tbody')[0];
		var oChildNodes = oBody.childNodes;
		for(var i=0;i<oChildNodes.length;i++){
		var oID = oChildNodes[i].childNodes[0];
		oID.style.backgroundColor="#cc1919"
		}
		}
	},oTable);
	
	}

});

            
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#chartView').html()
            });
            
            oView.placeAt('content');
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>
// Code goes here

/* Styles go here */