cancel
Showing results for 
Search instead for 
Did you mean: 

How to make a sap.m.Table cells(colums) editable ?

0 Kudos

HI,

I have to make a table control cells editable and as well as responsive. I need help with that?

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Ajit,

Please check this example on UI5 explored:

Editable Table

Regards,

Rahul

Answers (1)

Answers (1)

vijaytemgire
Explorer

Hi Ajit,

Please check this example on UI5 explored:

table row Edit

**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.

0 Kudos

thanks for sharing