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.

1.JPG

Now, when we select any row(Lead selection), we can see that the selected row is editable. ( here Last Name)

2.JPG

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.




To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Bhavin Anajwala

    Hello,

    Your post really helped,

    Just wanted to know that,

    what if I want to retrieve the value entered in the one of the textfield placed inside table cell.

    I am working on sapuii5 table element with Javascript,

    please reply.

    (0) 
  2. Anders Mørk

    Hi Kiran, great stuff… I’ve adapted your code to work with my own example where I would like to manipulate the data of a table through an Odata service. Binding the Odata service to the editable table was easy enough, but I wonder how I approach the problem of updating the HANA table underneath the Odata service. Any ideas? Should I try to intercept the events of the table?

    Best regards, Anders

    (0) 

Leave a Reply