<!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>
<style>
.sapUiTableTr>td {
padding-top: 2px;
padding-bottom: 1px;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
</style>
<!-- 2.) Create a UI5 Table and place it onto the page -->
<script>
var aData = [
{Country: "IN", Name: "Rahul Khanna", Address: "22950", key:"0"},
{Country: "IN", Name: "Debasis Mohanty", Address: "22953", key:"0"},
{Country: "ES", Name: "Maggie Grant", Address: "22954", key:"1"},
{Country: "FR", Name: "Andy Chun", Address: "22958", key:"1"},
{Country: "FR", Name: "Robert Anderson", Address: "22959", key:"0"}
];
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable",{
title: "Table Serial Number",
visibleRowCount: 5,
selectionMode: sap.ui.table.SelectionMode.Single,
navigationMode: sap.ui.table.NavigationMode.Paginator
});
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){
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: "Gender"}),
template: new sap.ui.commons.DropdownBox({items:[new sap.ui.core.ListItem({text:"Male", key:"0"}),
new sap.ui.core.ListItem({text:"Female", key:"1"})],
selectedKey:"{key}"}),
sortProperty: "text",
filterProperty: "text",
width: "150px"
}));
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);
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 */