CODEWITHSUNDEEP
sapui5
SeL
SeL

Reputation: 25

sap.ui.table.table with text wrapping (render issue)

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 row count if the rows are rebinded to the table.

If the rows exceed the actual screensize no scrollbar is added to the table.

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 issue 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,new sap.m.Link({text:"Click For More Info",target:"_blank"})
      ]});
      app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>

</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>

Upvotes: 0

Views: 2559

Answers (1)

SeL
SeL

Reputation: 25

Question can be closed. Sap.ui.table.table is not meant to change its row height dynamically.

https://experience.sap.com/fiori-design-web/grid-table/

--> section cell level, search key: wrap

Upvotes: 1

Related Questions