CODEWITHSUNDEEP
javascripteventsiconssapui5
dotchuZ
dotchuZ

Reputation: 2641

SAPUI5 table bind action to icon template

I am working with an UI5 table. I am reading my oData service and bind the elements to the column:

oTable.addColumn(new sap.ui.table.Column({
    label : new sap.ui.commons.Label({
        text : ""
    }),
    template : new sap.ui.core.Icon({
        src : "{Visible}",
    }),
    width : "55px",
    hAlign : "Center"
}));

{Visible} contains the sap-icon "expand" .. its properly shown in the table. How is it possible to bind an event to that icon?

I previously defined an icon separately via

var icon = new sap.ui.core.Icon({
            src : sURI,
        });

icon.attachPress(function(oEvent) {
  var selectedRow = this.getBindingContext().getProperty('myID');
  console.log('Row clicked:' + selectedRow);
});

but like this i cannot add my odata element {visible} to the column, because this has to be read in the addColumn-method, otherwise binding does not work.

Anybody some help on this?

Upvotes: 0

Views: 4566

Answers (1)

Haojie
Haojie

Reputation: 5713

Just add press event.

var pressHandler = function(oEvent) {
    var selectedRow = this.getBindingContext().getProperty('myID');
    console.log('Row clicked:' + selectedRow);
});

oTable.addColumn(new sap.ui.table.Column({
    label : new sap.ui.commons.Label({
        text : ""
    }),
    template : new sap.ui.core.Icon({
        src : "{Visible}",
        press: pressHandler
    }),
    width : "55px",
    hAlign : "Center"
}));

Upvotes: 2

Related Questions