I need to implement load more in my table with dynamic values. This is my screen.
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.