Skip to Content
0
Sep 22, 2020 at 07:31 AM

How to automatically scroll down to the last row of table in sapUI5?

671 Views

I need to implement load more in my table with dynamic values. This is my screen.enter image description here

Initially, I have displayed the values from api call. On that time my table should be scroll down automatically to the last row of the table. Then I clicked the load more button again the api calls and added the new values in the model and added into the table too. But its not scrolling down to the table. Here is the controller code I have tried for scroll down.

 var oTableModel = new sap.ui.model.json.JSONModel();
                    oTableModel .setSizeLimit(TABLE_ARRAY.length);
                    oTableModel .setData({
                        oset: TABLE_ARRAY
                    });

                    that.getView().byId("oSmartTable").setModel(oTableModel);
                    //that.getView().byId("otable").getBinding("items").refresh();
                    var oTable = that.getView().byId("logtable");

                    var oLength = TABLE_ARRAY.length - 1;
                    //New Item that is added
                    var oItem = oTable.getItems()[oLength];

                    var oScroll = that.getView().byId("oscroll");
                    //Add Delay since the new item needs to be added to the HTML Doc
                    jQuery.sap.delayedCall(100, that, function () {
                        //Scroll to the newly added item
                        oScroll.scrollToElement(oItem);
                    });

And this is view.xml code for smart table

 <ScrollContainer id="oscroll" height="100%" width="99%" horizontal="false" vertical="true">
                                <VBox alignItems="Stretch" width="100%" id="logTableVB">
                                    <items>
                                        
                                        <smartTable:SmartTable id="oSmartTable" entitySet="oset" smartFilterId="smartFilterBar" tableType="ResponsiveTable"
                                            app:p13nDialogSettings="{sort:{items:[{ columnKey: 'Type', operation: 'Ascending' }]}}" useExportToExcel="false"
                                            beforeExport="onBeforeExport" useVariantManagement="true" useTablePersonalisation="true" showTablePersonalisation="true"
                                            header="Total Logs " showRowCount="true" showFullScreenButton="true" enableAutoBinding="true">
                                            <Table id="logtable" sticky="ColumnHeaders" growingScrollToLoad="true" growing="true" growingThreshold="50">
                                                <!--firstVisibleRowChanged="scroll"-->
                                                <columns getResizable="true">
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="10%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c1_data", "filterProperty": "c1_data","columnKey": "Column 1", "leadingProperty" : "c1_data"}'/>
                                                        </customData>
                                                        <Text text="Column 1"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c2_data", "filterProperty": "c2_data","columnKey": "Column 2", "leadingProperty" : "c2_data"}'/>
                                                        </customData>
                                                        <Text text="Column 2"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c3_data", "filterProperty": "c3_data","columnKey": "Column 3", "leadingProperty" : "c3_data"}'/>
                                                        </customData>
                                                        <Text text="Column 3"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c4_data", "filterProperty": "c4_data","columnKey": "Column 4", "leadingProperty" : "c4_data"}'/>
                                                        </customData>
                                                        <Text text="Column 4"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c5_data", "filterProperty": "c5_data","columnKey": "Column 5", "leadingProperty" : "c5_data"}'/>
                                                        </customData>
                                                        <Text text="Column 5"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c6_data", "filterProperty": "c6_data","columnKey": "Column 6", "leadingProperty" : "c6_data"}'/>
                                                        </customData>
                                                        <Text text="Column6"/>
                                                    </Column>
                                                </columns>
                                                <items>
                                                    <ColumnListItem type="Active" press="onLogTableClick_">
                                                        <cells>
                                                            <Text text="{c1_data}"/>
                                                            <Text text="{c2_data}"/>
                                                            <Text text="{c3_data}"/>
                                                            <Text text="{c4_data}"/>
                                                            <Text text="{c5_data}"/>
                                                            <Text text="{c6_data}"/>
                                                        </cells>
                                                    </ColumnListItem>
                                                </items>
                                            </Table>
                                            <HBox>
                                                <items>
                                                    <HBox width="100%" justifyContent="Start" alignItems="Center">
                                                        <items></items>
                                                    </HBox>
                                                    <HBox width="100%" justifyContent="Center" alignItems="Center">
                                                        <items></items>
                                                    </HBox>
                                                    <HBox width="100%" justifyContent="End" alignItems="Center">
                                                        <items>
                                                            <Button id="oload_more" text="Load More" />
                                                        </items>
                                                    </HBox>
                                                </items>
                                            </HBox>
                                        </smartTable:SmartTable>
                                    </items>
                                </VBox>
                            </ScrollContainer>

I have put my smart table inside scroll container. when I click load more button the should be scroll down automatically to the last row. How can I achieve this? Thanks in advance.