Skip to Content
avatar image
Former Member

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

HI,

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Sep 13, 2017 at 12:02 PM

    Hi Ajit,

    Please check this example on UI5 explored:

    Editable Table

    Regards,

    Rahul

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 15, 2017 at 09:42 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded