How to Highlight Table Row

[francis_shi]

Introduction

In our daily development, Table/Tree table are the common control we always used for data displaying and changing. And customers may often want us to highlight specific records in the table which according to their filtering conditions. And bellowed animation is from my example. From this example, you can see the record is highlighted when user input the selection condition.

From the beginning, I tried but failed to find one solution to support highlight whole table rows which can support expanding, collapsing and scrolling... Then I have to find the solution by myself. The logic to select the records according to user selection conditions is simple, but we need to find table event to support table size changing, scrolling as well as collapsing and expanding.

Problem and Solution

First I thought I can use table's firstVisibleRowChanged event to catch the table scrolling and hight the selected rows as necessary. But I found that some times with this event, the rending of rows actually is a bit behind of this event, and the highlight always goes to the wrong rows on the screen.

Then I check the even of table row and row is actually directly related to the table row on UI screen.  And it has an event called modelContextChange, I tested it and it really works. My thought is get all the visible rows on the screen and register the event modelContextChange. When the context behind the row is changed( when scrolling, expanding/collapsing), Write some code to read the behind context content and determine if this row is in the selected scope. If yes I highlight it.

And event modelContextChange really can be triggered when scrolling table, collapsing/expanding the nodes after testing.

Besides, onAfterRendering event of table also needs to be supported when the table was re-rendered after user changed the screen size. The solution in my demo mainly includes 2 parts:

Define the event call back function and global variant.

Variant "hitItems" includes the key field value list which need to be highlighted. "afterTableRendering" is the call back function for onAfterRendering event, and most important, "hightLightRow" is call back function for row's event modelContextChange. Function "hightLightTable" is used at the first time when table screen has hit items.

    var iSearchOridnalNmber;

    var oTableGlobal;

    var hitItems = [];

    var afterTableRendering = function() {

        var rows = oTableGlobal.getRows();

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

            rows[i].attachModelContextChange(highLightRow);

            highLightRow.bind(rows[i])();

        }

    }



    var highLightTable = function() {

        if (hitItems.length > 0) {

            var rows = oTableGlobal.getRows();

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

                highLightRow.bind(rows[i])();

            }

        }

    };



    var highLightRow = function() {

        if (hitItems.length > 0) {

            var itemContenxt = this.getRowBindingContext();

            if (itemContenxt) {

                if (hitItems.includes(itemContenxt.getProperty("OrdinalNumber"))) {

                    this.addStyleClass("sapContrast");

                } else {

                    this.removeStyleClass("sapContrast");

                }

            } else {

                this.removeStyleClass("sapContrast");

            }

        }

    };

 

Define the hit item list for testing

you can change the code accordingly according to your own table search fields,  And register the event for table rendering and row event modelContextChange , After that, all the afterTableRendering to highlight at when active this function.

       //step 1 click search button

        onSearch: function(oEvent) {

            hitItems = [];

            hitItems.push(4);

            hitItems.push(210);

            hitItems.push(360);

            hitItems.push(454);

            oTableGlobal = this.getView().byId("gantt1").getTable();



            afterTableRendering();

            var oDelegate = {

                onAfterRendering: function(oEvent) {

                    afterTableRendering();

                }

            };

            oTableGlobal.addEventDelegate(oDelegate);

        },

Conclusion

We can use table event onAfterRendering to catch the table rendering event and highlight the records when table sizing changing. And most important, we need to use rows event modelContextChange to catch the content change event when user scrolling the table or expanding/collapsing some rows. You can try it!