CSS Classes Disappearing in UI5 Tables

[david_stocker]

Hi All,

I'm a bit puzzle by a bit of behavior that I'm seeing in the standard UI5 table.  I'm trying to use CSS to apply conditional formatting.  When I write cell values, I also add an appropriate css class in some instances, via a line of code like the one below:

currCell.addStyleClass("myCustomClass");

I have a separate css file, which is currently - for testing - setting the background of these cells red.  When the page loads, I see my red cells; but just for an instant.  Then everything goes back to the default theme.  When I inspect the cells in the browser's debugger, I see only the standard UI5 classes.

What might cause my custom classes to disappear? 

Thanks,

Dave

[kedarT · Accepted solution]

Hi David,

Instead of using addStyleClass, i would use toggleStyleClass - SAPUI5 SDK - Demo Kit

and replace the existing class with myCustomClass

Hope this helps.

[former_member182372 · Accepted solution]

Toggle will remove the class if it is in the list already

this.toggleStyleClass = function(sStyleClass, bAdd) {

....

  } else if (bAdd === undefined) {

  this.hasStyleClass(sStyleClass) ? this.removeStyleClass(sStyleClass) : this.addStyleClass(sStyleClass);

...

[david_stocker · Accepted solution]

The two scripts below are what I'm using.  In the first, I'm converting a Design Studio SDK result set from its multidimensional, OLAP format, to a flat form...  Then I apply it as the model and add the table.  It works, btw.  It also creates a global object, called repeatMask.  repeatMask is just an array of strings, indicating whether a given value repeats the value directly above it.  It is either tableRepeatLeader or tableRepeatFollower. 

So then if I want to show or hide repeating values, I just edit the my CSS accordingly; but first I need to add these strings to the css classes of the cells.  That's where the second script comes in.  I walk through every row and then across every row and add the relevant repeatMask[][] value to the cell.

Interestingly, it makes no difference whether I use addStyleClass() or toggleStyleClass(), probably because in the case where I'm just adding an additional class.  My problem is not that the UI5 theme is overriding my css.  I don't see my classes in at all!  I'm using test css that turns the cell red on .tableRepeatFollower and it is red for an instant, but then my class seems to simply disappear.  It almost seems like UI5 is doing some housekeeping and removing any non UI5 theme relevant css.

<script>

    oTable = new sap.ui.table.Table({editable:true, selectionMode:"Single", selectionBehavior:"RowSelector", visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Interactive});

    tableRefresh(oTable);

    oTable.placeAt("content");

</script>

<script>

    $( document ).ready(function() {

        var rows = oTable.getRows();

        for (var k = 0; k < rows.length; k++) {

            var cells = rows[k].getCells();

            for (var l = 0; l < cells.length; l++) {

                try{

                    var currCell = cells[l]

                    currCell.toggleStyleClass(repeatMask[k][l]);

                }

                catch(exc){

                    var catchMe = "just in case";

                }

            }

        }

    });

</script>

[former_member182372 · Accepted solution]

David, try to add delegate to the table instead of ready of doc

        oTable.addDelegate({

            onAfterRendering: function () {

var rows = oTable.getRows();

        for (var k = 0; k < rows.length; k++) {

            var cells = rows[k].getCells();

            for (var l = 0; l < cells.length; l++) {

                try{

                    var currCell = cells[l]

                    currCell.toggleStyleClass(repeatMask[k][l]);

                }

                catch(exc){

                    var catchMe = "just in case";

                }

            }

        }

}});

[david_stocker · Accepted solution]

Ok, that works!  Thanks!

Now I'd like to better understand what is going on.  As it looks, by adding the delegate, I'm doing what in other environments would be assigning an event or callback; please execute this code in the onAfterRendering event.  Is this correct?

Can I presume that onAfterRendering() executes later in time than the document ready?   Document ready is traditionally where I'd want to execute code that needs to run after everything else loads, but it looks like UI5 probably waits until then to finish bootstrapping components.  So after rendering is after, after.  😉  And in between, UI5 is resetting classes. 

[former_member182372 · Accepted solution]

mixing DOM events with SAPUI5 controls access is the thing "to avoid".

delegate can be executed prior or after "primary" implementation (second parameter, default value is false)

after rendering is executed after renderer of a control finished executing render method. so you should code it with assumption that it will be executed multiple times

[former_member182372]

David, do you apply addStyleClass to particular element or to the template? Some code would speed up the process 😉