How to delete the row of sap.m.Table on click of an icon inside ColumnListItem?

[Former Member]

I have a JS view in which I am creating a sap.m.Table. It's "columns" are bound to a JSON model. It's "items" are bound to odata service. I have two issues I have been struggling with for a while now.

Issue 1 - How to delete the row a table on click of an icon inside columnlistitem?
Issue 2 - I have created another question for this -

My view looks like this.

createContent : function(oController) {
    var oTable = new sap.m.Table("table1", {
            width: "auto",
            noDataText: "Please add rows to be displayed!"
        }).addStyleClass("sapUiResponsiveMargin");

    oTable.bindAggregation("columns", "Periods>/periods", function(sId, oContext) {
            var sColumnId = oContext.getObject().period;
            return new sap.m.Column({
                hAlign: "Center",
                vAlign: "Middle",
                header: new sap.m.Text({
                    text: sColumnId
                })
            });
       });

    oTable.bindItems("zStatus>/StatusSet", function(sId, oContext) { 

var row = new sap.m.ColumnListItem(sId, {
                type : "Inactive",
                cells: [
                new sap.ui.core.Icon({
                                            src: "sap-icon://delete",
                                            hoverColor: "red",
                                            activeColor: "red",
                                            press: [oController.onDeleteIconPress, oController]
                }),
                             new sap.m.Text({
                                        text: "{zStatus>Description}"
                             }),                                      
                     new sap.ui.core.Icon(sId, {
                            src: {
                                path: "zStatus>Status1",
                                formatter: function(status) {
                                    switch(status) {
                                    case "R":
                                        return "sap-icon://sys-cancel";
                                    case "G":
                                        return "sap-icon://sys-enter";
                                    case "Y":
                                        return "sap-icon://notification";
                                    default:
                                        return "sap-icon://sys-help";
                                    }
                                }
                            },
                            size: "1.5em",
                            press: [oController.onStatusIconPress, oController]
                        }) ]
    });


   return oTable;
}

In my controller I create an array, then a JSON model "Periods" from it and set it to this view. Odata model "zStatus" is defined in manifest file.

My controller code -

onInit : function() {
    // array aPeriods is populated first then
    var oPeriodsModel = new sap.ui.model.json.JSONModel();
    oPeriodsModel.setData({
        periods : aPeriods
    });
    this.getView().setModel(oPeriodsModel, "Periods");
}

onDeleteIconPress : function(oEvent) {
    // I manage to get the selected row 
    var oSelectedRow = oEvent.getSource().getParent().getBindingContext("zStatus").getObject();

    var oOriginalRows = oTable.getBinding("items").getModel().getProperty("/");
    var found = false, i;
    for (var key in oOriginalRows) {
        var oOriginalRow = oOriginalRows[key];
        if(oOriginalRow.Name === oSelectedRow.Name) {
            delete oOriginalRows[key];
            found = true;
            break;
        }
    }
    if(found) {
    // Problem 1 : Even though I delete row from the model it is still shown on the UI
    oTable.getBinding("items").getModel().setProperty("/", oOriginalRows);
        oTable.getBinding("items").getModel().refresh();
    }
}

tried several other ways but no luck. Looks like I do not understand binding completely yet.

[Former Member · Accepted solution]

My odata service shows data that is calculated using entries from several tables. So deletion in backend is not possible. So here is what I did.

I triggered the oData "read" manually and then copied the data received on success event into JSON model. I bound my table to this JSON model. Since JSON is client side model, now delete button works just fine.

[former_member340030]

Hi Sailesh ,

Check out these links :

http://stackoverflow.com/questions/29581944/how-to-delete-row-in-sapui5-table-with-delete-button-emb...

https://archive.sap.com/discussions/thread/3818927 (this one is using sap.ui.table.table but binding method is same)

thanks

Viplove

[Former Member]

@Viplove

I need to use sap.m.Table. Also I figured out what my problem is. I have bound items to OData model which is strictly a server side model. So any changes to model will trigger a round trip. In my case it hence always brings the original data and dislays it as if no deletion ever happened. I am trying out one possible solution. Hope that works.

[former_member340030]

Hi Shailesh

yeah i know i gave examples for sap.ui.table.table , but the binding of data to model is same for sap.m.table ... check out the logic of deletion that is control independent .

thanks

Viplove

[Former Member]

The design is such that there is nothing to delete in backend. Hence I want to avoid the roundtrip. But change in model triggers it anyway. I have found a way around it. Please see my answer in another comment.

Also in the example you provided table is bound to JSON model. I am using Odata. Besides I have a case that backed data cannot be deleted but display should change.