javascript - SAP UI5 - Cannot delete selected row from table - Stack Overflow

I have a view with a table with single selection mode and a button in its toolbar to delete selected row.

Though when I press the button, it deletes all the rows instead.

My code:

View file:

<template data-controller-name="myapplication.myview2">
    <div data-sap-ui-type="sap.ui.table.Table" id="tb1" data-width="100%" data-title="Person Table"></div>
</template>

Controller File:

onInit: function() {
        try {
            var oTab = [
                        // the table content

                        ];
            var oToolbar = new sap.uimons.Toolbar();
            oToolbar.addItem(new sap.uimons.Button({text: "Delete selected row", 
                press: function() {
                    try {
                        var newTab = this.getParent().getParent();
                        var index = newTab.getSelectedIndex();
                        if (index == -1)
                            alert("No row selected");
                        else {
                            var currModel = newTab.getModel();
                            var selectedRow = newTab.getRows()[index];
                            newTab.removeRow(selectedRow);
                            currModel.setData({table: newTab});
                            newTab.bindRows("/table");                  
                        }
                    } catch (err) {
                        txt = "There was an error on this page.\n\n";
                        txt += "Error description: " + err.message + "\n\n";
                        txt += "Click OK to continue.\n\n";
                        alert(txt);
                    }
                }}));
            this.byId("tb1").setToolbar(oToolbar);
            this.byId("tb1").setVisibleRowCount(5);
            this.byId("tb1").setNavigationMode(sap.ui.table.NavigationMode.Paginator);

            // Columns definition should be HERE

            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({table: oTab});
            this.byId("tb1").setModel(oModel);
            this.byId("tb1").bindRows("/table");

        } catch (err) {
            txt = "There was an error on this page.\n\n";
            txt += "Error description: " + err.message + "\n\n";
            txt += "Click OK to continue.\n\n";
            alert(txt);
        }
    },
// More functions....

Any ideas please?

I have a view with a table with single selection mode and a button in its toolbar to delete selected row.

Though when I press the button, it deletes all the rows instead.

My code:

View file:

<template data-controller-name="myapplication.myview2">
    <div data-sap-ui-type="sap.ui.table.Table" id="tb1" data-width="100%" data-title="Person Table"></div>
</template>

Controller File:

onInit: function() {
        try {
            var oTab = [
                        // the table content

                        ];
            var oToolbar = new sap.ui.mons.Toolbar();
            oToolbar.addItem(new sap.ui.mons.Button({text: "Delete selected row", 
                press: function() {
                    try {
                        var newTab = this.getParent().getParent();
                        var index = newTab.getSelectedIndex();
                        if (index == -1)
                            alert("No row selected");
                        else {
                            var currModel = newTab.getModel();
                            var selectedRow = newTab.getRows()[index];
                            newTab.removeRow(selectedRow);
                            currModel.setData({table: newTab});
                            newTab.bindRows("/table");                  
                        }
                    } catch (err) {
                        txt = "There was an error on this page.\n\n";
                        txt += "Error description: " + err.message + "\n\n";
                        txt += "Click OK to continue.\n\n";
                        alert(txt);
                    }
                }}));
            this.byId("tb1").setToolbar(oToolbar);
            this.byId("tb1").setVisibleRowCount(5);
            this.byId("tb1").setNavigationMode(sap.ui.table.NavigationMode.Paginator);

            // Columns definition should be HERE

            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData({table: oTab});
            this.byId("tb1").setModel(oModel);
            this.byId("tb1").bindRows("/table");

        } catch (err) {
            txt = "There was an error on this page.\n\n";
            txt += "Error description: " + err.message + "\n\n";
            txt += "Click OK to continue.\n\n";
            alert(txt);
        }
    },
// More functions....

Any ideas please?

• javascript
• model-view-controller
• sapui5

Share Improve this question Follow asked Dec 5, 2013 at 8:30 DanielYDanielY 1,17111 gold badge3434 silver badges5858 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to remove row from model, not from table directly.

Here is an example on how to do this.

http://jsbin./yewula/1/edit

Like many folks have suggested, we should removed it from the model. Since table is binded to the model, table will refresh accordingly.

-D

In your press function for the delete button, get more details about the table:

var tableIndex = newTab.getSelectedIndex();
var context = newTab.getContextByIndex(tableIndex);
var path = context.getPath();

In the variable path you will then find the data index that corresponds to the table row index. Use this data index to remove the row from the model.

currModel.oData.table.splice(data_index, 1);

Afterwards, all that should be needed is a refresh of the model to inform the controls about the changed data. And, for the user it might also be nice if the selection in the table gets reset as well.

currModel.refresh();
newTab.setSelectedIndex(-1);