Search code examples
csssapui5

Make SmartTable's Selected Row a Custom Color

Upon selection of a table row, i want to set a custom highlight color. I've tried thus far to no avail. I can identify the row with the javascript function, but the set css properties don't get applied to them. I can tell the selection has worked because for some reason when I click on a row, the row's height shrinks like so... enter image description here Details: Housed inside the smartTable is an mTable. My CSS:

tr.selected{
    background-color:red !important;
}

My JS:

onDataReceived:function(){
    var trs = document.querySelectorAll("tr"); //creates array of all tr elements
    for(var i = 0; i < trs.length; i++){
        trs[i].addEventListener("click", function(){this.className += "selected";});
    }
},

SmartTable's Rows aren't binded & don't appear until after dataReceived. In my function, I won't be able to retrieve an array of tr elements if the rows haven't been added to the DOM yet. Thus, in XML, my smartTable's dataReceived="onDataReceived".

Solution

  • To add a class to an existing className can be done as in the question, with a +. However, there needs to be a space before the new class that is being added. So use

    this.className += " selected";

    A better way (on modern browsers, not IE) of doing this might be to use the add function on the classList. That way it will only be added the once and won’t stack up if a row is highlighted again and again.

    this.classList.add(“selected”);

    when a row is deselected you can use the remove function on the classList.