cancel
Showing results for 
Search instead for 
Did you mean: 

Table / Panel /Page not scrollable with large amount of data

0 Kudos

I implemented an excel upload on my page. Whenever a file gets uploaded that contains more rows than my screen can show at one time, there is no scrollbar available on the whole page.

I added this to my table:

<m:Table id="testdata3" growing="true"	growingThreshold="10" growingScrollToLoad="true">
....
</m:Table>

But when extending the table I'm still not able to scroll down to the bottom of it.

The table is part of an extendable panel, so I can close that panel and see the rest of the page again. So it must have something to do with the table itself.

Please advise me with any debugging tips or whatever, I'm happy to share neccessary code!

Thanks!

Accepted Solutions (0)

Answers (2)

Answers (2)

Jagtar
Participant
0 Kudos

hi Sonja,

I have created table with multiple records and ScrollContainer works for me .

Please check in your case .

0 Kudos

Hm, as I said, it's not working for me.. and I think it's because of the collapsable panel that my table is stored ind. Couldn't there be a connection?

desiree_matas
Contributor
0 Kudos

Hi Sonja,

Which SAPUI5 version are you using?

Assuming you are using sap.m.Table, this control does not have its own scrollbars. Is it the table set in other layout control? Please, explain how the table is displayed and how the upload of data is done, so that we can try to help bette.

Best regards,

Désirée

I will add my view code to the question, as well as the upload from my controller!

my version is "1.52.11"

0 Kudos
<m:Panel expandable="true" expanded="true" width="100%" accessibleRole="Region" expand="onExpand"
		class="sapUiNoContentPadding customNoBorder">
<m:content>
	<layout:Grid defaultSpan="XL2 L2 M6 S12">
				<layout:content>
					<m:Panel header="Sheet Uploader">
						<m:Button icon="sap-icon://download" press="onDataExport"></m:Button>
						<up:FileUploader id="sheetUploader" name="sheetUploader" change="onXLSXupload"></up:FileUploader>
	<m:Table id="testdata3" growing="true" growingThreshold="10" growingScrollToLoad="true">
		<m:columns>
		<!-- Columns created in controller -->
		</m:columns>
		<m:items>
		<m:ColumnListItem id="columnsListItem" press="onPressListItem" type="Navigation">
		<m:cells>										<!-- Cells created in controller -->
		</m:cells>
		</m:ColumnListItem>
		</m:items>
	</m:Table>
	</m:Panel>
				</layout:content>
			</layout:Grid>
		</m:content>
	</m:Panel>

		onXLSXupload : function(e) {
			this._import(e.getParameter("files") && e.getParameter("files")[0]);
		},
		_import : function(file) {
			var oTable = this.getView().byId('testdata3');
			if(file && window.FileReader){
				var reader = new FileReader();
				var result = {}, data;
				var that = this;
				reader.readAsBinaryString(file);
				reader.onload = function(e) {
					var rawLog = reader.result;
					data = e.target.result;
					var wb = XLSX.read(data, {type: 'binary'});
					if (wb.SheetNames[0] != "_com.sap.ip.bi.xl.hiddensheet") {
					var first_sheet_name = wb.SheetNames[0];
					} else {
						var first_sheet_name = wb.SheetNames[1];
					}
					var worksheet = wb.Sheets[first_sheet_name];
					var aData = that.getRowData(worksheet);
					var aColumns = that.getColumnNames(worksheet, aData);
					
					var aCells = that.getCells(aData);
					var oModel = new sap.ui.model.json.JSONModel();
					oModel.setData({
						columns: aColumns,
						rows: aData
					});
					oTable.setModel(oModel);
					console.log(oModel.getData());
					oTable.bindAggregation("columns", "/columns", function(index, context) {
						return new sap.m.Column({
							header: new sap.m.Label({
								text: context.getObject().columnId
							})
						});
					});
					
					oTable.bindAggregation("items", "/rows", new sap.m.ColumnListItem({
						cells: aCells
					}));




				};
			};
		},