Introduction
This document helps how to make selected row of table editable in SAP UI5.
Step by Step Process
To create a Table refer this example in the Demo Kit: SAPUI5 SDK - Demo Kit - Table
We can make a specific column/entire table editable conditionally by binding the editable property of TextField to an attribute/field of a model and then set the value(for editable property) to the model data.
Here, we will see how to set a particular(/selected) row/cell of table editable.
For this, we will create an extra field/attribute in the same model data and then bind the editable property of Textfield to that attribute and then control the value based on the row selection.
Here is the code for the UI5 application.
<!DOCTYPE HTML>
<html>
<head>
<title>Selected Row of Table Editable Demo </title>
<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.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
jQuery(function() {
sap.ui.table.Table.extend('DemoTable', {
renderer: function(oRm, oControl) {
sap.ui.table.TableRenderer.render(oRm, oControl);
},
setRowEditable: function(edit, rowindex) {
var model = this.getModel();
var rowPath = this.getBindingInfo('rows').path;
var rows = model.getProperty(rowPath);
for (i = 0; i < rows.length; i++) {
row = rows[i];
if (i == rowindex) {
row[edit] = true; // make the selected row editable and rest non editable
} else {
row[edit] = false;
}
}
this.invalidate();
}
});
// Model Data (local)
var aData = [{
ID: "MEM1",
lname: "Jung",
fname: "Thomas",
gender: "Male",
rating: 5,
edit: false
}, {
ID: "MEM2",
lname: "Valluru",
fname: "Kiran",
gender: "Male",
rating: 2,
edit: false
}, {
ID: "MEM3",
lname: "Powlas",
fname: "Tammy",
gender: "Female",
rating: 5,
edit: false
}, {
ID: "MEM4",
lname: "Padmanabhan",
fname: "Bharath",
gender: "Male",
rating: 4,
edit: false
}, {
ID: "MEM5",
lname: "Nampoothiri",
fname: "Sreejith",
gender: "Male",
rating: 5,
edit: false
}, {
ID: "MEM6",
lname: "Valluru",
fname: "Kishore",
gender: "Male",
rating: 5,
edit: false
}, ];
// Define a table
var oTable = new DemoTable({
title: "Member Details", // heading of the table
visibleRowCount: 4, // Visible no of Rows of table
selectionMode: sap.ui.table.SelectionMode.Single, // Singe or Multi
navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar
fixedColumnCount: 3, // Freezes the number of columns
enableColumnReordering: true, // Allows you to drag and drop the column and reorder the position of the column
});
// Use the Object defined for table to add new column into the table
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Member ID" // Creates an Header with value defined for the text attribute
}),
template: new sap.ui.commons.TextField({
value: '{ID}', // binds the value into the text field defined using JSON
editable: false // Non editable
}),
sortProperty: "ID", // enables sorting on the column
filterProperty: "ID", // enables set filter on the column
width: "200px" // width of the column
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Last Name"
}),
template: new sap.ui.commons.TextField({
value: '{lname}',
editable: '{edit}' // Binding editable property of text field to 'edit' attribute of Model
}),
sortProperty: "lname",
filterProperty: "lname",
width: "200px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "First Name"
}),
template: new sap.ui.commons.TextField({
value: '{fname}',
editable: false // Non editable ( bind to control editable property dynamically)
}),
sortProperty: "fname",
filterProperty: "fname",
width: "125px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Gender"
}),
template: new sap.ui.commons.ComboBox({
items: [new sap.ui.core.ListItem({
text: "Female"
}), new sap.ui.core.ListItem({
text: "Male"
})]
}).bindProperty("value", "gender"),
sortProperty: "gender",
filterProperty: "gender",
width: "75px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Rating"
}),
template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rating"),
sortProperty: "rating",
filterProperty: "rating",
width: "80px"
}));
//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model
oModel.setData({ // Set the data to the model using the JSON object defined already
modelData: aData
});
oTable.setModel(oModel);
oTable.bindRows("/modelData"); // binding all the rows into the model
// Event Handler for Table Lead/Row selection
oTable.attachRowSelectionChange(function(oEvent) {
var selectedindex = oEvent.getParameter("rowIndex"); // selected Row Index
// Set Selected Row Editable
oTable.setRowEditable('edit', selectedindex); // 'edit' is feild name to which editable property is bound
})
//Place the Table on the UI
oTable.placeAt("MemTable");
})
</script>
</head>
<body class="sapUiBody">
<div id="MemTable"></div>
</body>
</html>Save and Run the application.
Result:
Now we can see, initially all the rows(of Last Name) are non editable.
Now, when we select any row(Lead selection), we can see that the selected row is editable. ( here Last Name)
Here, I just demonstrated by binding the editable property of Last Name column. you can also bind the other fields and make the entire Row editable based on your requirements.
- SAP Managed Tags:
4 Comments
