<!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 RowSelect Sample</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 = [{
value:"Editable",
Country: "IN",
Name: "Anand Krishna",
Address: "22950"
}, {
value:"Non-Editable",
Country: "IN",
Name: "Sasthy",
Address: "22953"
}, {
value:"Non-Editable",
Country: "ES",
Name: "Sasthy",
Address: "22954"
}, {
value:"Editable",
Country: "FR",
Name: "Rajesh Sawant",
Address: "22958"
}, {
value:"Editable",
Country: "FR",
Name: "Mayank",
Address: "22959"
}, {
value:"Non-Editable",
Country: "FR",
Name: "Vinod",
Address: "42959"
}];
//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);
//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.ScrollBar,
});
//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.DropdownBox({
editable: false,
items:[new sap.ui.core.ListItem({text:"Editable", key:"Editable"}),
new sap.ui.core.ListItem({text:"Non-Editable", key:"Non-Editable"})]
}).bindProperty("value", "value"),
width: "150px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Country"
}),
template: new sap.ui.commons.TextField({
editable: false
}).bindProperty("value", "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({
editable: false
}).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.TextField({
editable: false
}).bindProperty("value", "Address"),
sortProperty: "Address",
filterProperty: "Address",
width: "150px"
}));
oTable2.bindRows("/modelData/employeesData");
var oButton = new sap.ui.commons.Button({
text: "Add Row",
style: sap.ui.commons.ButtonStyle.Emph,
press: function() {
var oTable = sap.ui.getCore().byId("oTable");
var oVisibleRowCount = oTable.getVisibleRowCount()
var oModel = sap.ui.getCore().getModel().getProperty("/modelData/employeesData");
oModel.push({
SerialNo: "",
Country: "",
Name: "",
Address: ""
});
sap.ui.getCore().getModel().setProperty("/modelData/employeesData", oModel);
jQuery.sap.delayedCall(500, null, function() {
oTable._scrollPageDown();
var oNewItem = oTable.getRows()[oVisibleRowCount - 1];
var oCells = oNewItem.getCells();
oNewItem.getCells()[0].setSelectedKey("Editable");
for (var i = 0; i < oCells.length; i++) {
oNewItem.getCells()[i].setEditable(true);
}
});
}
});
var ovLayout = new sap.ui.layout.VerticalLayout("Layout1", {
content: [oTable2, oButton]
});
ovLayout.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 */