Mouseover on table rows

[Former Member]

Hi all,

I'm showing some information in a sap.ui.table.Table and in a map. I'd like to highlight the place on the map when a mouseover event on a table row occurs. I've tried many approaches but none actually worked. What would be the correct way? First of all, how to place the listener on a mousover on the row (or each cell separately?), second, how to find the model data that belongs to this row (the table might be sorted differently than the initial model)?

Cheers,

-- Micha

[francesco_alborghetti · Accepted solution]

Hi,

I did this to solve a similar problem:

I attached a browser event to the columns (for me was only relevant for a couple of columns):

oFTemplate.attachBrowserEvent("keydown", oController.enableValues);

than in in the listener i could get the model of the field in this way:

enableValues: function(oEvent) {

  var oData = this.getBindingContext().getModel().getData(this.getBindingContext().sPath);

Maybe this can help.

Best regards

Francesco

[Former Member · Accepted solution]

Hi Francesco,

yes, this works even for tables with more than 100 row data. The only inconvenience is that I want it on the whole rows, so I've got to do something like

$(".sapUiTableCell>").mouseover(function()

	var oCell = sap.ui.getCore().byId(this.id);
	var path = oCell.getBindingContext().getPath(); ...

        }).mouseout(...);

But in any case it is the only solution so far that works.

-- Micha

[PMarti]

Hi Micha, you can retrieve the selected row like this:

$("#" + idTableControl).on('mouseover',function(evt){
          $("#" + idTableControl).find('.sapUiTableRowHvr')
})

sapUiTableRowHvr is the css class which sapui5 add to selected rows

[Former Member]

Interesting. I've thought that mouseover does not actually select the row, as a matter of fact it should not 🙂

-- Micha

[Former Member]

As a matter of fact, I've found a way using jQuery.mouseover(), but it seems way too complicated:

$(".sapUiTableTr").mouseover(function() {

          var id = this.id;

          var index = sap.ui.getCore().byId(id).getIndex();

          var path = oTable.getBinding().getContexts()[index].getPath();

          var data = oTable.getModel().getProperty(path);

          jQuery.sap.log.info("row mouseover " + data.title);

}

Is there a simpler way?

-- Micha

[former_member182862]

Not alot simpler. But we need to do some check if row is empty.

oTable.onAfterRendering = function() {
  if (sap.ui.table.Table.prototype.onAfterRendering) {
    sap.ui.table.Table.prototype.onAfterRendering.apply(this, arguments);
  }
  var tbl = this;

  this.$().find('.sapUiTableTr').each(function() {
    var row = sap.ui.getCore().byId($(this).attr('id'));
    var cxt = row.getBindingContext();
    if (cxt) {
      var obj = cxt.getObject();
      ...
    }
  });
}

-D

[Former Member]

I have to reiterate on this: I've found out that oTable.getBinding().getContexts() only returns 100 elements, so if the data for the table has more than 100 rows, this won't work. Dennis, your code does not work either, for all rows it returns undefined:

sap.ui.getCore().byId("signalsTable-rows-row7").getBindingContext()

2014-10-10 09:06:44.495 undefined

So how can I get the data of the mouseover/selected table row when the table has more than 100 rows?

Cheers,

-- Micha

[former_member293602]

Hi Micha,

I havn't done this, but my idea would be to define your own control as described here OpenUI5 SDK - Demo Kit - e.g. by extending from a control that you already use in that table. Then you can register your control on the browser event mouseover and react accordingly. How to register and handle events in Controls is described here OpenUI5 SDK - Demo Kit too.

Regards, Frank