Make cells of selected rows editable in SAPUI5

Question

I got a table where i need to edit 2 cells of selected rows i tryed this first on my own with this code rubbish because get rows always got index of 0-9 and my getSelectedIndices get the real index.

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
var rows = oTable1.getRows();
for (i = 0; i < haveToChange.length; i++) {
    var cells = rows[haveToChange[i]].getCells();
    if (cells[10].mProperties.editable == false) {
        cells[10].setEditable(true);
        cells[12].setEditable(true);
        cells[13].setEditable(true);
    }
    else
    {
        cells[10].setEditable(false);
        var getit = cells[10].getValue();


        if (cells[6]._sRenderedValue.indexOf(",") > -1)
        {
            var Woerter = cells[6]._sRenderedValue.split(',');
            var zahl = Woerter[0] + ".";
            for (var i = 1 ; i < Woerter.length; i++) {
                zahl = zahl + Woerter[i];
            }
            if (getit.indexOf(".") > -1)
            {
                var arrays = getit.split(".");
                getit = "";
                for(var i = 0; i<arrays.length; i++)
                {            
                    getit = getit + arrays[i];
                }
            }


            var honorar = parseInt(getit) * parseFloat(zahl);
        }
        else
        {
            var zahl = "";
            if (cells[6]._sRenderedValue.indexOf(".") > -1) {
                var Woerter = cells[6]._sRenderedValue.split('.');
                for ( var i = 0 ; i < Woerter.length; i++) {
                    zahl = zahl + Woerter[i];
                }
                if (getit.indexOf(".") > -1) {
                    var arrays = getit.split(".");
                    getit = "";
                    for (var i = 0; i < arrays.length; i++) {
                        getit = getit + arrays[i];
                    }
                }


            }
            honorar = parseInt(getit) * parseInt(zahl);
        }
        cells[11].setValue(x);
        cells[12].setEditable(false);
        cells[13].setEditable(false);
    }
}

}

Secondly i tried to follow some tutorial the problem is that it makes the complete row editable but too the stat edit is not on my row so this won't work anyway:

var model = this.getView().getModel("jsonmodel");
var rowPath = this.byId("table1").getBindingInfo('rows').path;
var rows = model.getProperty(rowPath);
var haveToChange = this.byId("table1")..getSelectedIndices();
for (x = 0; x < haveToChange.length; x++) {
    for (i = 0; i < rows.length; i++) {
        row = rows[i];
        if (i == haveToChange[x]) {
            row['edit'] = true; // make the selected row editable and rest non editable
        } else {
            row['edit'] = false;
        }
    }
}

so how can i archiev too get the cells 10 and 12 editable after an Index of 10?

Answer 1

As the Table does only create the Controls for visible Rows i would not recommend modify the Controls of the Rows directly. If you select Rows that are not visible (scrolled outside of view) you cannot modify their Controls because the do not exist.

Instead i would recommend to add an attribute to the model objects of the rows (only on the client in your onEditRow method) and bind editable to it. Use expression-binding to force the value to false if its not defined in the model:

<TextField id="SatzNeu" editable="{= !!${jsonmodel>editable}}" value="{jsonmodel>SatzNeu}" />

The indices that Table.getSelectedIndices() returns can be used to get the binding contexts of the rows and with them the paths of the selected rows in the model (jsbin):

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
haveToChange.forEach(function(index){
  var context = oTable1.getContextByIndex(index);
  var path = context.getPath();
  context.getModel().setProperty(path+"/editable", true);
});  

But if i get it right, you want to make deselected rows non-editable too, so you have to iterate over all items to disable/enable where appropriate (jsbin):

var oTable1 = this.byId("table1");
var haveToChange = oTable1.getSelectedIndices();
var model = oTable1.getModel("jsonmodel");
var length = model.getProperty("/DLSet/results").length;
for (var i = 0; i<length; i++){
  var path = "/DLSet/results/"+i+"/editable";
  var editable = haveToChange.indexOf(i) >= 0;
  if (model.getProperty(path) != editable) model.setProperty(path, editable);
}

You can use the first approach if you want to discard the edit button and use the rowSelectionChange event to update editable/noneditable as the event gives you both: the selected and the deselected rows.

Answer 2

Generally, if you need to modify UI behavior (enabling/disabling, showing/hiding, etc) you should use the power of databinding

In your case, you could use the editable property of the table cell's TextField control to toggle editing/readonly state upon selection, in this case I defined a property isEnabled:

<TextField value="{col1}" editable="{isEnabled}" />

This implies you use a JSONModel for your table, so you can add extra UI specifiec properties, but since you want to edit a table, an ODataModel doesn't make much sense anyway in that case ;-)

The table's rowSelectionChange event could call a method which then sets the property, and toggles the editable state:

toggleEditableFields : function(oEvent) {
    var aIndices = oEvent.getSource().getSelectedIndices(),
        myData = this.getView().getModel().getProperty("/data"),
        that = this;

    // first, set all the isEnabled properties of all records to readonly state
    $.each(myData,function(i, v){
        that.getView().getModel().setProperty("/data/" + v + "/isEnabled", false);
    });
    // then, set all the isEnabled properties of the selected records to editable state
    $.each(aIndices,function(i, v){
        that.getView().getModel().setProperty("/data/" + v + "/isEnabled", true);
    });
}

See this working example: click one or more rows in the table using the table's row selectors, and the editable state of the input fields are enabled/diabled accordingly:

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                {
                    "col1": "at curabitur vestibulum",
                    "col2": "porttitor pharetra rutrum",
                    "col3": 93,
                    "isEnabled": false
                },
                {
                    "col1": "hendrerit dui fringilla",
                    "col2": "adipiscing suspendisse lorem",
                    "col3": 36,
                    "isEnabled": false
                },
                {
                    "col1": "placerat vel placerat",
                    "col2": "suspendisse quis sit",
                    "col3": 9,
                    "isEnabled": false
                },
                {
                    "col1": "sagittis at sed",
                    "col2": "malesuada aliquam sit",
                    "col3": 26,
                    "isEnabled": false
                },
                {
                    "col1": "donec donec sed",
                    "col2": "dui tempor nunc",
                    "col3": 38,
                    "isEnabled": false
                },
                {
                    "col1": "sed vitae fringilla",
                    "col2": "vestibulum pretium dolor",
                    "col3": 17,
                    "isEnabled": false
                }
            ],
            selectedIndices : [],
        });

        this.getView().setModel(oModel);
    },

    toggleEditableFields : function(oEvent) {
        var aIndices = oEvent.getSource().getSelectedIndices(),
            myData = this.getView().getModel().getProperty("/data"),
            that = this;
        
        $.each(myData,function(i, v){
            that.getView().getModel().setProperty("/data/" + v + "/isEnabled", false);
        });
        $.each(aIndices,function(i, v){
            that.getView().getModel().setProperty("/data/" + v + "/isEnabled", true);
        });
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.ui.commons"
      xmlns:l="sap.ui.commons.layout"
      xmlns:t="sap.ui.table"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:Table id="tbl" rows="{/data}" selectionMode="MultiToggle" navigationMode="Paginator" rowSelectionChange="toggleEditableFields" visibleRowCount="{/data/length}">
            <t:columns>
                <t:Column>
                    <t:label><Label text="col1" /></t:label>
                    <t:template><TextField value="{col1}" editable="{isEnabled}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="col2" /></t:label>
                    <t:template><TextField value="{col2}" editable="{isEnabled}" /></t:template>
                </t:Column>
            </t:columns>
        </t:Table>
    </mvc:View>
</script>

Note: I used XMLViews because I found these significantly easier to write, but the same applies for Javascript views