Dynamic radio button (dynamic)

Hi,
I am trying to create AW radio button dynamically.
While tyring, I was having difficulty in setting the width of the radio control.
app_inp[k] = new AW.UI.Radio;
obj.setClass("flow", "horizantal");
obj.getItemTemplate(i).setStyle("width", "100px");
obj.setItemCount(3);
document.write(obj).

I tried using:
obj.setStyle('width', 100px');
obj.getItemTemplate(i).setStyle('width', 100px');
Even when the width is reduced to '10px', it displays in some standard width.
obj.getItemTemplate(i).setStyle('width', 10px');

Can you please let me know, the correct syntax in setting the width of the radio control, as per the standard CSS below.

<style>

#radio1 {height: 25px}
#radio1 .aw-list-item {width: 85px}

</style>

Thanks

please read
app_inp[k] = new AW.UI.Radio;
as
obj = new AW.UI.Radio;

Hello VJ,

Just use :
obj.setSize(150,40);

Where 150 is the width and 40 is the height.
If you don't set the size this way, the radio button will have a standard width.

I'm not sure what you think the setClass() function does, but if you think its set the flow to horizontal, then you're very much mistaken. Doing:

obj.setClass("flow", "horizantal")

Set's the object's class to .aw-flow-horizantal. If that's what you intended, then you should have a style defined with that name. If not, then read this:
http://www.w3.org/TR/1999/WD-i18n-format-19990322/

Some of your setStyle() examples have a typo (missing quote) but I'll assume that was just a mistake in your typing and not in your actual code.

To set the width, you could just use this style (affects all radio buttons):

.aw-ui-radio    {width:100px}

Thanks Dries and Anthony for your help! With your help I was able to solve this issue. But just to detail on the problem as I think I didn't quite convey what I needed in my earlier post.

I am using a 'horizontal' radio. I had a typo when specifying the setClass. It should be obj.setClass("flow", "horizontal"); instead of obj.setClass("flow", "horizantal");

I need AW equivalent methods to specify the width of the radio. I cannot use ".aw-ui-radio {width:100px}" or .aw-list-item {width: 100px} specific for a radio button, as I have to randomly generate this radio, so I even don't know the variable name or id to associate a radio at that point of time.

So I needed to specify the id, styles etc at runtime. So I needed methods to specify it's width.

I tried the following AW methods to specify its width.
1. obj.setStyle("width", "100px");
2. obj.setSize(100,20); // as per Dries recommendation
3. obj.getItemTemplate(i).setStyle("width", "100px");
4. obj.getItemTemplate(1).setStyle("width", "50px");
obj.getItemTemplate(2).setStyle("width", "50px");
obj.getItemTemplate(3).setStyle("width", "50px");
5. obj.getItemTemplate(1).setSize(50, 20);
obj.getItemTemplate(2).setStyle(50,20);
obj.getItemTemplate(3).setStyle(50,20);

But the radio displays with the first item with some larger width than the second and third item. If I use obj.getItemTemplate(i).setStyle("width", "100px"), the radio displays with the standard width, even if I change the width.
obj.setSize(100,20); and obj.setStyle("width", "100px"); displays only the first item.

But when I issued '.aw-list-item {width: 50px;}' at thetop of style section, which applies to all radio button controls (even for ones I had not associated an id with), I got the desired result.

But instead of applying the same rule for all radio buttons, i thought I could do the same for individual radio buttons with some AW methods, as above, but it did not work to my luck. If anyone knows about it, can you please convey in this forum.

Anyway, thanks a lot Dries and Anthony for pointing me in a different direction,which worked ultimately.

Haven't tried this?
obj.getItemTemplate().setStyle("width", "100px");
I mean without the "i" in getItemTemplate(i).
I think this way the style is applied to all Items..
Or in other words, it's not possible to apply a different withd to each Item. ( so you need to get the lenght of the wider Item and then set this max-withd to all items as described ).
HTH

Thanks Carlos for your response.
I tried obj.getItemTemplate() without 'i', but only the first item in the radio is displayed, the other two items are not visible. I am not sure, something unusual happening, may be I am doing something stupid. But still, when I apply the width for all radio controls, which I will be using later, by specifying '.aw-list-item {width: 50px;}' at the top of style section, it works for me, but other solutions does not work.

May be it is because I am creating these controls, dynamically. When the form is rendered, the radio controls are not yet there. Depending on user events, these controls are created. At that time, I am creating the radio object, setting its id, style, position etc. I dont know, I may have to continue only with this workaround atleast for now.

Thanks again for your help!

Sorry , my fault, you can set the width of any particular item by setting a default one previously with obj.getItemTemplate().setStyle.... ,check the code below going to:
http://www.activewidgets.com/ui.radio/
then click on the link "Show Example"
then select full code and paste this:

<script>
    var obj = new AW.UI.Radio;
    obj.setItemText(["Home", "Favorites", "Font size", "Search"]);
    obj.setItemImage(["home", "favorites", "fontsize", "search"]);
    obj.setItemCount(4);
    obj.setSelectedItems([0]);
obj.setSize(800,20); // total control width
obj.setClass("flow", "horizontal");
obj.getItemTemplate().setStyle("width", "80px"); // default item width 
obj.getItemTemplate(1).setStyle("width", "50px"); // width item-1 (overrides default)
obj.getItemTemplate(2).setStyle("width", "150px"); // width item-2
    document.write(obj);
</script>

and finally click on "show me button" and you can see the result on a new window.
HTH

Thanks Carlos for this example. As per this example, when I try to create the radio control dynamically with same code above, i dont know, it only displays the first item and remaining items of control are not displayed. But when I use '.aw-list-item {width: 50px;}' at the top of style section, it displays all items in a control. I need to debug this issue later, once I complete my code. But for now, I have to go with this workaround.

Thanks a lot Carlos, for helping me in sorting out this issue