Dynamic Horizontal Radio Buttons Control Issues

[Peter]

Hi,

I've been trying a few things in Tiggzi, and am having a few issues with using a dynamic radio button control. Specifically:

1. I'd like to be able to use the "data-mini" style on the radio control. I can't see how to do this inside tiggzi - what I have been doing is modifying the Tiggzi-generated HTML to add this attribute like:

   div class="mobileradiogroup1"

   Any help in adding this in via Tiggzi so I don't need to modify the generated code would be appreciated. Do I need to brute-force modify the HTML thru javascript?

2. Each button in the horizontal radio is being rendered as if it were the leftmost and the rightmost element in the list, i.e. each element is being rendered with rounded corners on the left and the right. Any idea why this is happening? In the developer, I have only one item in the radio group as a template.

   Thanks,

   Peter

[maxkatz]

For #1, you can set any jQuery Mobile attributes via More Properties option: http://help.tiggzi.com/documentation/...

For #2, can you post a screen shot of how it looks and how you want it to look?

[Peter]

Hi Max,

#1 :

This doesn't seem to be possible via "more properties". The element that needs to be modified is a "fieldset" element with other attributes: data-role="controlgroup" data-type='horizontal'. Modification of this element is not supported inside the tiggzi app.

#2 : Attached is a file showing two radio groups. The top is "bad" because each button is rounded, instead of only the first and last buttons in the group. The bottom one is "good" because only the first and last buttons in the group are rounded.

[maxkatz]

1) OK, I see what you mean. In such case you could run jQuery to modify the element in the DOM.

2) Do you use Button component in the first screen shot and radio buttons in the second screen shot?

[Peter]

Hi Max,

2) No, I'm using the same widget from the tiggzi palette - the radio widget. the only difference is that in the first picture, i'm using dynamic creation of the buttons based on a JSON list returned from a REST call, and in the second picture I'm using a static number of buttons defined inside the tiggzi app builder.

Peter

[maxkatz]

Your goal is to achieve the result in picture #2, but using dynamic creation?

[Peter]

That's correct. When I use dynamic creation thru tiggzi data mapping, it comes out looking like pic #1. My theory is that every cell is being rendered as if it is the only cell in a radio control.

[maxkatz]

They are all in the same radio button group as you can select only one at a time. Because the buttons are created dynamically, the controls need to be refreshed, something like this:

$('fieldset[data-role="controlgroup"]').controlgroup("refresh");

but that hasn't worked yet for me.

[Peter]

Max,

I've figured out some CSS removeClass() changes that, if I make them, will cause the radio buttons to show up like I want them to. The problem is that I need to make those changes after Tiggzi has finished the data mapping, and the dynamic radio button elements are in place. Is there a hook for AFTER the data mapping has completed? I'm trying to do it on the load() event, which is not working (the dynamic elements are not in place).

[maxkatz]

Use service's instance oncomplete event. What code did you to style the buttons correctly?