on 09-13-2017 12:55 PM
HI,
I have to make a table control cells editable and as well as responsive. I need help with that?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Ajit,
Please check this example on UI5 explored:
**you can go through the following code**
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
// View Definition
sap.ui.jsview("myView.Template", {
getControllerName: function() {
return "myView.Template";
},
createContent: function(oController) {
var oText = "Product";
var oTable = new sap.m.Table({
id: this.createId("oTable"),
mode: "SingleSelectMaster",
selectionChange: function(oEvent) {
oController.onSelectionChange(oEvent);
},
columns: [new sap.m.Column({
header: new sap.m.Label({
text: "ProductId"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Name"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Weight"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Edit"
})
})
],
items: {
path: '/Employees',
template: new sap.m.ColumnListItem({
cells: [new sap.m.Input({
value: "{FirstName}",
editable: false
}),
new sap.m.Input({
value: "{Title}",
editable: false
}),
new sap.m.Input({
value: "{Country}",
editable: false
}),
new sap.m.Button({
text: "Edit",
press: function(oEvent) {
oController.onEdit(oEvent);
}
})
]
})
}
});
return oTable;
}
});
//Controller Definition
// Controller definition
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/Filter',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, Filter, JSONModel) {
"use strict";
var TableController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
var sURI = "https://cors-anywhere.herokuapp.com/http://services.odata.org/V3/Northwind/Northwind.svc/";
var oDataModel = new sap.ui.model.odata.ODataModel(sURI);
sap.ui.getCore().setModel(oDataModel);
var oModel = new JSONModel();
sap.ui.getCore().setModel(oModel, "oFlagModel");
},
onSelectionChange: function(oEvent) {
var oSelectedItem = oEvent.getParameter("listItem");
var oModel = oSelectedItem.getBindingContext().getObject();
alert(JSON.stringify(oModel));
},
onEdit: function(oEvent) {
var oItem = oEvent.getSource().getParent();
var oTable = this.getView().byId("oTable");
var oIndex = oTable.indexOfItem(oItem);
var oModel = sap.ui.getCore().getModel("oFlagModel");
var oFlag = oModel.getProperty("/oIndex");
if (oFlag === undefined) {
oModel.setProperty("/oIndex", oIndex);
this.onPress(oItem, true);
} else {
var oPreviousItem = oTable.getItems()[oFlag];
this.onPress(oPreviousItem, false);
var oCurrentItem = oTable.getItems()[oIndex];
oModel.setProperty("/oIndex", oIndex);
this.onPress(oCurrentItem, true);
}
},
onPress: function(oItem, oFlag) {
var oEditableCells = oItem.getCells();
$(oEditableCells).each(function(i) {
var oEditableCell = oEditableCells[i];
var oMetaData = oEditableCell.getMetadata();
var oElement = oMetaData.getElementName();
if (oElement == "sap.m.Input") {
oEditableCell.setEditable(oFlag);
}
});
}
});
return TableController;
});
//Instantiate View
var view = sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "myView.Template"
});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Regards,
Vijay.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.