<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>Table Model Updation</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified,sap.ui.table"
    data-sap-ui-xx-bindingSyntax="complex"></script>

    <!-- 2.) Create a UI5 Table and place it onto the page -->
    <script>


    var aData = [
    {Country: "IN", Name: "Rahul Khanna", Address: "22950"},
    {Country: "IN", Name: "Debasis Mohanty", Address: "22953"},
    {Country: "ES", Name: "Maggie Grant", Address: "22954"},
    {Country: "FR", Name: "Andy Chun", Address: "22958"},
    {Country: "FR", Name: "Robert Anderson", Address: "22959"},
    {Country: "IN", Name: "Swetha Singh", Address: "23968"},
    {Country: "FR", Name: "Mayank D", Address: "42059"}
];

//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable",{
    title: "Table Serial Number",
    visibleRowCount: 5,
    firstVisibleRow: 3,
    selectionMode: sap.ui.table.SelectionMode.Single,
    navigationMode: sap.ui.table.NavigationMode.Paginator,
    fixedColumnCount: 2
});

//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Serial Number"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "SerialNo"),
    sortProperty: "SerialNo",
    filterProperty: "SerialNo",
    width: "150px"
}));

oTable2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Country"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "Country"),
    sortProperty: "Country",
    filterProperty: "Country",
    width: "150px"
}));
oTable2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Name"}),
    template: new sap.ui.commons.TextField({change:function(oEvent){
	alert(oEvent.getSource().getId());
	alert(oEvent.getSource().getParent().getId());
    var oNewValue = oEvent.getParameter("newValue");
    var oRow = oEvent.getSource().getParent();
    var oContextPath = oRow.getBindingContext().sPath;
    oTable2.getModel().getProperty(oContextPath).Name = oNewValue;
    alert(JSON.stringify(sap.ui.getCore().getModel().getProperty(oContextPath)));
    }}).bindProperty("value", "Name"),
    sortProperty: "Name",
    filterProperty: "Name",
    width: "150px",
    hAlign: "Center"
}));
oTable2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Address"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "Address"),
    sortProperty: "Address",
    filterProperty: "Address",
    width: "150px"
}));

//Create a model and bind the table rows to this model
var model = new sap.ui.model.json.JSONModel();
        model.setData({
            modelData: {
            employeesData : {}
            }
            });
    sap.ui.getCore().setModel(model);
    for(var i = 0; i< aData.length ; i++){
    aData[i]['SerialNo'] = parseInt(i+1);
    }
sap.ui.getCore().getModel().setProperty("/modelData/employeesData", aData)
oTable2.bindRows("/modelData/employeesData");

     oTable2.placeAt("uiArea");


     </script>
</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 Table -->
    <div id="uiArea"></div>
</body>
</html>
// Code goes here

/* Styles go here */