cancel
Showing results for 
Search instead for 
Did you mean: 

How to prevent sap.ui.table.Table from displaying "multiline" rows when data contains carriage returns?

jtaylor
Active Participant
0 Kudos

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!

Accepted Solutions (1)

Accepted Solutions (1)

former_member182862
Active Contributor
0 Kudos

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

jtaylor
Active Participant
0 Kudos

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

    });

}

jtaylor
Active Participant
0 Kudos

I'm wondering if it's not the long string, but the carriage returns that are contained in the data (the data needs to be formatted data).

former_member182862
Active Contributor
0 Kudos

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

former_member182862
Active Contributor
0 Kudos

yes, carriage returns will cause it to wrap.

Here is the proof.

http://jsbin.com/kavuv/edit?html,js,output

jtaylor
Active Participant
0 Kudos

Thanks... I know that previously, my table was not wrapping on carriage return, any ideas on why it started? I'll use the formatter function though, that is a good idea (I was going to modify the data prior to binding it).

Answers (0)