UI5 Table Column Headers disappear after navigation

[Former Member]

Hi!

I have a weird problem where in my UI5 application after some navigation (sliding back and forth) the column headers of my table (sap.ui.table.Table) are missing. After F5 it comes back again and is displayed normally.

The pic:

I pinpointed the cause of this: When navigating from the view where the table is located while the scroll-bar is not at its initial position (see blue line in the picture above) then the column headers go bananas and the scroll-bar is still positioned at the same spot prior to navigating away from that view where the table was.

The table itself is created once, the contents are refreshed, thus I am not creating the table over and over again. Is there a way to position the scroll-bar back to its initial position before navigating away or can I refresh/redraw the whole table including its scroll-bars?

PS: This is a weird bug!

[Former Member · Accepted solution]

Also, using JQuery I can use scrollLeft which is nice, but how can I select the correct element?

Because I tried selecting the table by its ID, but that had no result 😕

[Former Member · Accepted solution]

Finally figured out the required sap generated runtime component to apply the bellow command to:

document.getElementById("<your_table_id>-hsb-sb").scrollLeft = 0;

[saivellanki · Accepted solution]

Or you can also try something like this:

var oTable = sap.ui.getCore().byId("oTable");          //Get Hold of table
var oScrollBar = oTable._oHSb;               //Get Hold of Horizontal Scroll Bar
oScrollBar.setScrollPosition(0);

Regards,

Sai Vellanki.

[Former Member]

Is there a way to scroll back to the first visible column?:D

[saivellanki]

Hi German,

Try using setFirstVisibleRow method. Something like:

var oTable = this.getView().byId("oTable");          //Get Hold of your table
oTable.setFirstVisibleRow(0);

API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.table.Table

Regards,

Sai Vellanki.

[Former Member]

Thanks for you feedback, Sai!

Unfortunately this did not solve the issue.

[saivellanki]

Not sure, what is happening. To set the scroll position at initial position this sample works fine for me: Plunker

or else one more option would be destroy the rows aggregation and bind it to table again.

[Former Member]

If you look at the picture then you will see that the problem is caused by the Horizontal Scrollbar. Your example has Vertical Scrollbar, thus it has no effect on the Table Header Columns.

In addition. Destroying rows won't work since it causes the error below:

The control manages the rows aggregation. The method "destroyRows" cannot be used programmatically!