CODEWITHSUNDEEP
csssapui5
dreamstate
dreamstate

Reputation: 179

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".

Upvotes: 1

Views: 367

Answers (2)

dreamstate
dreamstate

Reputation: 179

Thank you to @A Haworth for the guidance.

For those still struggling, here is my complete (working!) code that enables deselecting when user clicks on the same row twice or clicks on a new row:

onInit:function(){
    var that=this; //'this' refers to the view controller
    this.aTrCounter=[]; //counter is used to ensure only 1 row is selected at a time so only 1row is colored at a time. Reason why this is in onInit is to avoid errors due to pagination
},
onDataReceived:function(){
    var trs = document.querySelectorAll("tr");
    for(var i = 0; i < trs.length; i++){
        trs[i].addEventListener("click", function(){
            if(that.aTrCounter.length===0) { //1st row selection
                this.classList.add("selected"); //'this' no longer refers to view controller, it points to the tr itself 
                that.aTrCounter.push(this); //add tr into array to be counted & for later changes
            }
            else if(that.aTrCounter.length>0){ //2nd row selection
                if(that.aTrCounter[0]===this){ //if user clicks the same row
                    this.classList.remove("selected");
                    that.aTrCounter.pop(); //remove last element from array (in this case, the only element)
                } else if(that.aTrCounter[0]!=this){ //if user clicks different row
                    that.aTrCounter[0].classList.remove("selected");
                    that.aTrCounter.pop();
                    this.classList.add("selected");
                    that.aTrCounter.push(this);
                }
            }
        });
    }
}

If there are more elegant solutions, they are most welcome.

Upvotes: 0

A Haworth
A Haworth

Reputation: 36426

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.

Upvotes: 1

Related Questions