on 07-02-2015 3:45 PM
Yesterday, the sap.ui.table.Table I am using in my app started displaying the the rows (which contain carriage returns/newlines in the data) as having multiple lines of data (no change in data). I'm not certain how this happened, but it has the unwanted effect of making the table's height adjust as the user scrolls through the data (and if it extends past the screen height, things get really fun with table and page resizing). I wouldn't really mind the multi-row look if it was possible to have a fixed height on the table, so that partial rows would show, as with classic native app programs do. I've looked through all the properties, and I didn't see anything that I could imagine would have the desired effect. If it matters, I am using TextViews for my columns because I don't desire the data to be editable in the table due to the size/formatting of the data.
So to get to the point, is there a way to either:
1. Force the sap.ui.table.Table to display only one line, followed by "..." when the data extends past the column bounds as it was previously doing
or 2. Force the sap.ui.table.Table to have a fixed height and show partial last rows, similar to native app tables?
Thanks!
Hi John
Like at this example, the default css style for a table cell is to have ellipsis for long string
JS Bin - Collaborative JavaScript Debugging
You have to resize the first column to see the ellipsis.
can we know what is the template control used for your table call?
Thanks
-D
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I'm just using the default css + the blue crystal theme. It was working this way previously, but no idea what changed.
By template control for the table call, do you mean the control that I use in that cell when creating the table? All columns are TextViews. I apologize if I misunderstood, I am just starting out with using UI5.
My code so far:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script id="sap-ui-bootstrap"
src="sapui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3">//https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js </script>
<script src='<%=ResolveClientUrl("~/scripts/sapui5helper.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/scripts/general.js") %>' type="text/javascript"></script>
<script>
const B_ENABLE_TABLE_DOUBLECLICK_OPEN_EDITOR = false; //this functionality is disabled because clicking/doubleclicking column data doesn't change row selection... confusing to user
var resolutionData = <% Response.Write(getResolutionsJSON()); %>;
var resolutionEditor;
var prevSelectedIndex;
//Create an instance of the table control
var buttonToolbarEdit = new sap.ui.commons.Button({ text: "Edit Selection", press: openResolutionEditor });
var buttonToolbarDelete = new sap.ui.commons.Button({ text: "Delete Selection", press: function () {alert("Not implemented."); } });
var oTable = createSimpleTable("Resolutions"
, undefined
, [ buttonToolbarEdit, buttonToolbarDelete ]);
//the following two lines are the double-click handler
oTable.attachEvent("rowSelectionChange"
, function(){
var selIndex = arguments[0].getSource().getSelectedIndex();
if(selIndex > -1) {prevSelectedIndex = selIndex}}
);
oTable.attachBrowserEvent("dblclick"
, function(){
if(!oTable.isIndexSelected(prevSelectedIndex))
{
oTable.addSelectionInterval(prevSelectedIndex, prevSelectedIndex);
}
if(B_ENABLE_TABLE_DOUBLECLICK_OPEN_EDITOR)
{
openResolutionEditor();
}
});
//Define the columns automagically from the object
var columns = createTableColumns(resolutionData[0], true)
//reorder the columns
for(i in columns)
{
if(columns[i].getName() == "ErrorCode")
{
var tempCol = columns[i];
columns.splice(i,1);
columns.splice(0,0, tempCol);
}
}
//add columns after modifying as necessary
for(i in columns)
{
switch(columns[i].getName())
{
case "ResolutionID":
columns[i].setVisible(false);
break;
case "MessageRegex":
columns[i].setWidth("70px");
break;
case "Resolution":
columns[i].setWidth("190px");
break;
case "ErrorCode":
break;
case "Culture":
break;
}
oTable.addColumn(columns[i]);
}
//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ modelData: resolutionData });
oTable.setModel(oModel);
oTable.bindRows("/modelData");
//Initially sort the table
oTable.sort(oTable.getColumns()[0]);
//Bring the table onto the UI
oTable.placeAt("resolutionsTable");
function openResolutionEditor() {
resolutionEditor = getResolutionDialog(getRowContents(oTable));
openControl(resolutionEditor);
}
</script>
<script>
getHeader().placeAt("Header");
</script>
</head>
<body class='sapUiBody'>
<div id ="Header"></div>
<form id="form1" runat="server">
<div>
<div id='resolutionsTable'></div>
</div>
</form>
</body>
</html>
relevant js functions:
function createTableColumns(obj, bColumnsReadOnly)
{
bColumnsReadOnly = defaultParameter(bColumnsReadOnly, DEFAULTCOLUMNSREADONLY);
var columns = [];
for (colName in obj) {
if(bColumnsReadOnly)
{
columns[columns.length] = createTableColumnTextView(colName);
}
else
{
columns[columns.length] = createTableColumnTextField(colName);
}
}
return columns;
}
function createTableColumnTextView(colName, colWidth)
{
colWidth = defaultParameter(colWidth, DEFAULTCOLUMNWIDTH);
return new sap.ui.table.Column({name : colName,
label: new sap.ui.commons.Label({ text: colName }),
width: colWidth,
template: new sap.ui.commons.TextView().bindProperty("text", colName),
sortProperty: colName,
filterProperty: colName});
}
function createSimpleTable(sTitle, nVisibleRowCount, oaToolbarButtons, oaToolbarExtensionButtons, bSingleSelectMode)
{
var paramSelectionMode = bSingleSelectMode ? sap.ui.table.SelectionMode.Single : sap.ui.table.SelectionMode.Multi;
nVisibleRowCount = defaultParameter(nVisibleRowCount, DEFAULTVISIBLEROWCOUNT);
return new sap.ui.table.Table({
title: sTitle,
visibleRowCount: nVisibleRowCount,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Interactive,
selectionMode: paramSelectionMode,
toolbar: new sap.ui.commons.Toolbar({ items: oaToolbarButtons})
,extension: oaToolbarExtensionButtons
});
}
Hi John
You are using sap.ui.commons.TextView and TextField. I am guessing the latter because I do not see the createTableColumnTextField function.
On your browser (I use Chrome), you should be able to right click and choose inspect element of the table cell that wraps to figure out the css that caused it to wrap.
Thanks
-D
yes, carriage returns will cause it to wrap.
Here is the proof.
User | Count |
---|---|
84 | |
24 | |
11 | |
9 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.