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

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

Hi Benjith,I tried this JS Code.1st time when i click this button,its not working,but from the 2nd time,its working as expected.Its very strange.What will be the possible solution?

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

Hello @Benjith Sam 

What if I have an icon inside a link widget?

I have a column in my table with a link. Inside a link there's a trash bin icon. When the user clicks on the icon, a pop-up is triggered "are you sure you want to delete this record?". I followed your steps. However, if the end-user clicks on the icon immediately, without clicking the row first, the table row doesn't get highlighted.

Thank you!