Skip to Content

How to access row data and column name on click of an icon on columnlistitem in sap.m.Table?

Jan 14, 2017 at 07:20 PM


avatar image
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 - I have created another question for this - How to delete the row of sap.m.Table on click of an icon inside ColumnListItem?
Issue 2 - How to access row data and column name on click of an icon on columnlistitem in sap.m.Table?

My view looks like this.

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

    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";
                                        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();
        periods : aPeriods
    this.getView().setModel(oPeriodsModel, "Periods");

    onStatusIconPress : function(oEvent) {
    // I can get the row data on icon press
    // Problem 2: but how do I get the column name?
    // I wanted to attach the column name to icon as cusotmData but I could       //not access model attached to columns inside bindItems method
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
avatar image
Former Member Jan 15, 2017 at 11:54 AM

I managed to solve it myself.

Created an array in creatContent. Filled it with columnIds in bind Aggregation of columns and then used this array in bindItems method.

10 |10000 characters needed characters left characters exceeded