Hey,
i've got a sap.ui.table with visibleRowCountMode="Auto" binded with a JSON Model.
In my ColumnBinding I use a sap.m.text element as a template to wrap the text if its too long for the columnWidth.
It seems like the table doesnt refresh the actual height and the visible row count if the rows are rebinded to the table.
So no scrollbar appears if the table rows exceed the actual screen size.
see screen:
I created a bin to show the example coding of my table:
https://jsbin.com/noxaqofeci/edit?html,js,output
--> if you resize the column and the table doesnt fit into the screen the bug will appear.
Am i missing something or is there any way to fix this?
Thanks!
example code for my problem:
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Dynamic Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>
<script>
var columnData = [{
columnName: "firstName"
}, {
columnName: "lastName"
}, {
columnName: "department"
}];
var rowData = [{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
}, {
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
},{
firstName: "3lines3lines3lines3lines3lines3lines",
lastName: "empty",
department: "empty"
}];
var oTable = new sap.ui.table.Table({
visibleRowCountMode: "Auto"
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().columnName;
return new sap.ui.table.Column({
width: "120px",
label: columnName,
template: new sap.m.Text({text: {path:columnName}})
});
});
oTable.bindRows("/rows");
page = new sap.m.Page({content:[
oTable
]});
app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Bluesky
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.