How to Set itemPress event for sap.m.Table in a UI5 XML View?

[former_member204682]

Hi Gurus,

I've spent a whole day and still could not figure out how to set the itemPress event handler properly for Table in UI5 XML View. I've seen many examples which set the itemPress in JavaScript View like below, but still don't know how to set the itemPress event handler properly in UI5 XML View.

Example to set itemPress event in JS View:

var oTable = new sap.m.Table({
     ......
     itemPress: function(e){},
     ......
});

My case to set itemPress in XML View, but it won't work at all.

<Table items="{/EmployeeSet}"
           itemPress="onItemPress" growing="true" growingScrollToLoad="true">
.....
</Table>

Can UI5 doc be more specific or has more helpful code samples?

Any help is appreciated!

regards,

yang

[former_member204682 · Accepted solution]

Hi All,

Finally I figured out the reason why itemPress event is not fired.

According to the API document of itemPress event:

"This event is called when an item is pressed regardless of the selection mode. NOTE: This event is fired for all kind of list items unless the item's type is Inactive."

It has to make sure the ColumnListItem do have the type property rather than Inactive since Inactive is default value.

<ColumnListItem type="Active">...</ColumnListItem>

Then everything works fine! But it's so hard to get to the right track!!!

regards,

yang

[Former Member]

Hi Yang ,

     The below code might help you out in sorting it out your problem,

<Table

  headerText="{i18n>LineItemTableHeader}"

  items="{LineItems}" > /*binding element which is to be binded to the table*/

  <columns>

  <Column>

  <header><Label text="Product" /></header>

  </Column>

  <Column

  minScreenWidth="Tablet"

  demandPopin="true"

  hAlign="Center" >

  <header><Label text="Delivery Date" /></header>

  </Column>

  <Column

  minScreenWidth="Tablet"

  demandPopin="true"

  hAlign="Center" >

  <header><Label text="Quantity" /></header>

  </Column>

  <Column

  hAlign="Right" >

  <header><Label text="Price" /></header>

  </Column>

  </columns>

  <ColumnListItem

  type="Navigation"

  press="handleLineItemPress" >

  <cells>

  <ObjectIdentifier

  title="{ProductId}" />

  <Text

  text="{

  path:'DeliveryDate',

  }"/>

  <Text

  text="{

  path:'Quantity',

  }"/>

  <ObjectNumber

  number="{GrossAmount}"

  numberUnit="{CurrencyCode}" />

  </cells>

  </ColumnListItem>

  </Table>

regards,

Nagarjun

[former_member204682]

Thank you for the help!

[former_member705593]

To it as below..

in xml view

<List headerText="Products" itemPress="onPress" > </List>

In controller js

onPress: function(){ MessageToast.show("Hello"); }

[former_member204682]

BTW, according to the API document, the ListType value could be one of Active, Detail, DetailAndActive, Inactive, Navigation.

[Former Member]

You'll have to set the list mode to Active or Navigation to enable itemPress event. I guess by default the list mode is set to Inactive which is the reason for the itemPress event for not getting triggered. Say when you bind the Table items to a ColumnListItem, the list mode can be set to Active as below,

<Table path="{/}">
<items>
<ColumnListItem mode="Active">
..............
</ColumnListItem>
</Table>

[former_member204682]

Thank you for the hint. But it doesn't work either. You can try it.

[Former Member]

Hi ,

I have make the following coding in view.

<Table xmlns="sap.m"

  id="idtea"

  busy="false"

  mode="SingleSelect"

  select ="tableselection"

  items="{

      path:'oappModel>/Employees'}"

      itemPress="onItemPress"

      growing="true"

      growingScrollToLoad="true"

  >

in controller

onItemPress: function(oEvent)

{

    alert ("alert"+ oEvent.getSource().getBindingContext("oappModel").getProperty("LastName"));

}

while i press on any table row i got the below error . Kindly help.

"Uncaught TypeError: Cannot read property 'getProperty' of undefined"

Thanks,

Meghal Shah

[former_member679019]

You're wrong, it's not mode="Active", its type="Active"

[former_member204682]

yes, I have a controller of the XML View as below.

jQuery.sap.require("sap.m.MessageToast");

sap.ui.controller("sap.cd.ui5.demo.view.Dashboard", {
     onInit: funciton(){ 
        ......
      },
     onItemPress: function(){
          var msg = "This is a test of itemPress!"
          sap.m.MessageToast.show(msg);
    }
});

As the above code shows, I have already created a event handler metod onItemPress. But the message toast didn't showup when the table row is pressed or clicked.

regards,

yang

[former_member182372]

does your view have a controller? post controller hanndler code

[ranjit_rao]

Hi Yang,

I don't think it is that difficult. You create a method in the controller named "onItemPress". And it would surely work. Please write back if more help is required.

[former_member204682]

I've already done so, but still won't work.

[Former Member]

Hi Yang,

Use selectionChange event instead of itemPress.

edit : you can write the logic on selectionchange in the controller part

regards

Indrajith