Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X
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,
Solved! Go to Solution.
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,
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,
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,