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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.
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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.

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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.

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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.
Announcements


Top Tags