Skip to Content

UI5 Table (Grid) not displaying a check box in the Selector Cells.

Feb 22, 2017 at 02:34 PM


avatar image
Former Member

If you know an answer to any of my five issues then I would pleased to hear from you.

First issue: I have a bound table which is displaying data fine. It's set to allow multi-row selection, see XML code below. However, the same Grid table example on the UI5 'Explored' site shows check boxes down the left hand side for selecting rows with, but having read the source code for the example it looks like they do not do anything specific to allow this option. My table can select multiple of single rows, but it displays just a clickable square white button to left, for want for a better description; whereas I want to see a clickable checkbox when selecting the rows. Have tried the code out in Chrome and Explorer, but with no joy.

Second issue. I can change the height of the header/label columns, but am unable to change the height of the table rows, no matter what value I choose. As you can see from the code example below, the header.label has a height of 50px, but the Table rows remain the same and seem to default to around 25px, even though I have set them to be 50px (as an experiment as I want to reduce it eventually), but it does not seem to work.

Third issue: I have a vertical scroll bar, but try as I might I can not get a horizontal scroll bar to appear. I have added a couple of extra columns to the table to exceed the table width and thus force a scroll bar (Horizontal) to appear, but alas not . There must be something obvious that I am missing, as I have seen them on many examples, and the scrollbar functionality should be obvious.

Fourth issue: What Table properties will stop the use from manually changing the column width when in use?.

Fifth issue: Is it possible to automatically wrap the column label text?. It does not seem to be. So at present a long column header description looks something like this: "The big green b...." when displayed. I want it to wrap so that the text "The big" appears on one line and "green bus" appears on the second line of the column header, obviously provided the column/header height is large enough to allow this. ;)

<Table id="idTblIndividuals"
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

avatar image
Former Member
Feb 22, 2017 at 04:36 PM

Hi Gary,

1) What is your version of UI5? As of 1.38 'Multi' is depreciated. The new value should be: 'MultiToggle'

2) The expected value of rowHeight is an int. Can you make sure that you enter: rowHeight: 50

3) Try to set the sap.m.table property "fixedLayout" as "false", then it will render table column width according to the cell content.

and then put the table into a scroll container.

4) This is set at the column level. Set resizable property to false

5) The only way that I know how to do this is via CSS

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Thanks for that.

Yes, I did change it to 'MultiToggle' eventually, although it did still work with 'Multi', I believe.

I can not use an INT in that way while in XML, within javascript it's not a problem, but XML requires it to be in quotes when a property of Table.

I'll try your 3rd and 4th suggestion though. Much appreciated.

As you'll see from my reply posting, I have managed to resolve issue 1 and 2. Although I did a lot of experimenting with css before that, wasting many hours, as did many other people by the looks of the amount of posts on this subject. I think the solution I've used though is probably better, although I've not tested it fully yet.

avatar image
Former Member Feb 22, 2017 at 05:06 PM

OKay, I have managed to resolve issue one and two by using class="sapUiSizeCompact". That was the issue around showing check boxes in the Selector cells for selecting single/multiple rows. That was just a by-product (I think) of changing the table row height via the use of the class. Interestingly enough, the SAP guides/demokit's have been my guiding light in the past, especially when using Table, although there seems to be no mention of this class when performing a page search. Very strange that.

This can be set in your XML like so:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
<!--  Remove warning message by placing the above declaration -->
<!-- 27/02/22 - Gary King                                                                    -->
<!-- Spent many, many hours experimenting with css to get the right row height in the table, -->
<!-- eventually discovered the sapUiSizeCompact class                                        -->
<mvc:View  class="sapUiSizeCompact" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="tabLayout.controller.View1">
10 |10000 characters needed characters left characters exceeded