cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X

Radio Button on the List Items

pshashipreetham
17-Peridot

Radio Button on the List Items

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.

Shashi_Preetham_0-1664871093903.png
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
1 ACCEPTED SOLUTION

Accepted Solutions

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

3 REPLIES 3

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?

Hi @PaiChung,

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

Thanks,

Shashi Preetham

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