Synchronize two SAPUI5 ui tables

[former_member591516]

Has anyone ever tried to synchronize two tables in SAPUI5. Not the data/models of the tables but the controls themselves. So e.g. when I scroll in one table, it automatically scrolls the other one, too, or when I adjust the column width of the one table, the other table's columns get adjusted.

I'm curious for any input!

[former_member629664]

Has anyone been able to solve this? I tried Ayaz's and Sergio's solutions and they did not work for me.

[former_member582685]

Not sure if you have already figured it out but here's how you can synchronize the horizontal scrolling for two tables.

In onAfterRendering method write this jQuery code

$(".sapUiTableHSb").on('scroll', function () {
      $(".sapUiTableHSb").scrollLeft($(this).scrollLeft());
});

sapUiTableHSb is a class of horizontal scrollbar of a table. This should synchronize the horizontal scrollbars of all the tables in your view.

[davidgbarbero]

If you get to read this, THANK YOU! ^^

[SergioG_TX]

with jquery you may use something like this $(document).scrollTop() or $(document).scrollLeft()... just replace the doc... w the scroll bar element and you should be good... a nice google search on scroll position will give you additional details

[former_member591516]

Unfortunately your answer doesn't help me at all. I did a lot of research on scrolling in jquery but I am not able to apply it to my specific situation. Since I'm not a very advanced programmer I would be thankful for more assistance.

[SergioG_TX]

yes... this was a challenging one for me... you will need to scroll using jquery.... basically get the scroll position for x/y from the scrolling table... and then set the same values on the other table... I did this for horizontal and vertical scrolling.

[former_member591516]

Thanks 9958e4b6df99431a84a41b015b639ac8 for your reply! Can you provide me with an example of how you did it? I'm not an experienced jQuery developer, so I've no clue where to start..

That's how I set my two tables:

<table:Table id="uploadData">
    <table:columns>
        <!-- Columns created in controller -->
    </table:columns>
    <table:rows>
        <!-- Rows created in controller -->
    </table:rows>
</table:Table> 
</m:Panel>

<m:Panel id="generatedTableView">
</m:Panel>

for "uploadData", I bind the Columns and Rows seperately in my controller.

As for the second table, it get's called by

this.callbackAPI.generatedTableView.byId("dataTable") **and then** placeAt("generatedTableView")

So I can't exactly access the properties of the second table, right?

I'd be thankful for any deeper instructions!