Solved: Radio Button on the List Items

pshashipreetham · ‎Oct 04, 2022

Hi,

I got the Radio Buttons on the List widget,

Problem: The selected radio Button stays only when we Hover on it. It should be selected after hovering or until the next list item is selected.

Used the following CSS:

ptcs-list::part(item-value)::before{
content:url('../Common/thingworx/widgets/dhxgrid/images/radio-unfilled.png');
margin: 10px;
}

ptcs-list::part(item-value):hover::before{
content:url('../Common/thingworx/widgets/dhxgrid/images/radio-filled.png');
margin:10px;
}

Any workarounds over here can be done?

Thanks,

Shashi Preetham

pshashipreetham · ‎Oct 09, 2022

So,

Every list widget is bounded by a service that has a DataShape. I have created another Field within the Datashape named HTMLField with Basetype HTML and in Service, I have looped as below

for(var x = 0; x < infotable.length; x++)
{
var data = {};
row =  infoTable.rows[x];
data.HTMLField =  "<html><body><input type = 'radio', id = '"+x+"'></input> <label for = '"+x+"'><b>row.displayField</b></label></body></html>
}

And selected this HTMLField datashape Field as displayField in the ListWidget, which created the Radio Buttons on the Runtime.. and working as expected.

Thanks,

Shashi Preetham

View solution in original post

PaiChung · ‎Oct 04, 2022

Are you saying that the selection you make doesn't stay as a solid circle but goes back to a blank circle when you are not hovering over it?

pshashipreetham · ‎Oct 09, 2022

Hi @PaiChung,

Thanks for the reply. YES, that is Exactly what is happening!

Thanks,

Shashi Preetham

pshashipreetham · ‎Oct 09, 2022

So,

Every list widget is bounded by a service that has a DataShape. I have created another Field within the Datashape named HTMLField with Basetype HTML and in Service, I have looped as below

for(var x = 0; x < infotable.length; x++)
{
var data = {};
row =  infoTable.rows[x];
data.HTMLField =  "<html><body><input type = 'radio', id = '"+x+"'></input> <label for = '"+x+"'><b>row.displayField</b></label></body></html>
}

And selected this HTMLField datashape Field as displayField in the ListWidget, which created the Radio Buttons on the Runtime.. and working as expected.

Thanks,

Shashi Preetham