How to Highlight-change color of selected row in table
Application Type
Reactive

Hi,

I want to Highlight-change color of selected row of a table on clicking or selecting the row .For example ,Content of table 2 gets updated on selecting row of first table .So I want to highlight that particular row of first table on click so that I will know which row is selected whose contents are shown in table 2.How to do it ?

Thanks 


mvp_badge
MVP
Solution

Hi Vishal,

For your use case, one of the approaches is to use JS.

1) Add the below-mentioned CSS rules to the style sheet.

CSS Snippet:

.selected-row > td {
    background-color: yellow;
    color: red;
}

2) In the Screen OnReady action flow, define a JS node with the below script.

JS Snippet:

document.getElementById($parameters.TableWidgetId).addEventListener('click', function (e) {
    if(e.target.nodeName === 'TD') {
        var selectedRow = this.querySelector('.selected-row');
        if (selectedRow) {
            selectedRow.classList.remove('selected-row');
        }
        e.target.closest('tr').classList.add('selected-row');
    }
});

See this demo screen: CustomerList

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_TableRowHighlight.oml

Hi,

Tried using alert(e.target.nodeName);

Showing "SPAN" instead of "A".

Using SPAN it is working now. So I have  to use e.target.nodeName === 'SPAN'

Regards


 

mvp_badge
MVP

Hi Vishal,

Probably, It's because you are using an expression (which is a span element) widget inside the Link widget. In my case, I was using normal text.

Node name A refers to the anchor/link tag.


Kind regards,

Benjith Sam

HI Vishal Gangwal .

use this CSS for change background color of row on hover 

.table-row:hover td {

background:green;

color: white; 

}

Demo link : https://personal-x1ixzlcz.outsystemscloud.com/VisitorManagement/Visitors


Thanks,


Hi,

Thanks for your reply ! 

But I want to set the color till the time row is selected not only on hover. Like I am clicking a link in table 1 row 1, then contents of table 2 changes and till the time I click on any other row in table 1 that same row should stay highlighted.

Regards

  

mvp_badge
MVP
Solution

Hi Vishal,

For your use case, one of the approaches is to use JS.

1) Add the below-mentioned CSS rules to the style sheet.

CSS Snippet:

.selected-row > td {
    background-color: yellow;
    color: red;
}

2) In the Screen OnReady action flow, define a JS node with the below script.

JS Snippet:

document.getElementById($parameters.TableWidgetId).addEventListener('click', function (e) {
    if(e.target.nodeName === 'TD') {
        var selectedRow = this.querySelector('.selected-row');
        if (selectedRow) {
            selectedRow.classList.remove('selected-row');
        }
        e.target.closest('tr').classList.add('selected-row');
    }
});

See this demo screen: CustomerList

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_TableRowHighlight.oml

Hi Benjith,

Thanks ! Its working. Also I want to know if I am clicking on a link inside any column of that row , is it possible to highlight that row as well ? As if I am clicking on a row it is working but if I am clicking on a link inside that row it is not working.

Regards


mvp_badge
MVP

You're welcome, Vishal.

Gald to help you :)

To get the same row highlight behaviour on clicking a link element, you need to add OR condition in the IF clause as highlighted below: 

JS Snippet:

document.getElementById($parameters.TableWidgetId).addEventListener('click', function (e) {
    if(e.target.nodeName === 'TD' || e.target.nodeName === 'A') {
        var selectedRow = this.querySelector('.selected-row');
        if (selectedRow) {
            selectedRow.classList.remove('selected-row');
        }
        e.target.closest('tr').classList.add('selected-row');
    }
});

See this demo screen: CustomerList

I hope this helps you!


Kind regards,

Benjith Sam

Hi,

Thanks again for your prompt response. What should I write instead of "A" in 

 e.target.nodeName === 'A' ?  I have to mention link name or linkonclick action name ? or what ?

Thanks & Regards

Hi,

Tried using alert(e.target.nodeName);

Showing "SPAN" instead of "A".

Using SPAN it is working now. So I have  to use e.target.nodeName === 'SPAN'

Regards


 

mvp_badge
MVP

Hi Vishal,

Probably, It's because you are using an expression (which is a span element) widget inside the Link widget. In my case, I was using normal text.

Node name A refers to the anchor/link tag.


Kind regards,

Benjith Sam

Hi Benjith,

Ok. Good to know new thing. I am new to Javascript , so was not knowing that.

Thanks & Regards

Vishal


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.