Help with a widget and a radio button

[capi]

Hi,

I'm trying to configure a widget with a radio buttons inside. I don't know anything about json and jquery, but I'm trying to use the Alarm widget that HG include by default.

With the html file, I don't have any problem. I can see the widget and select any of the three buttons, but the problem it's that I can't refresh the control group state with HG, or when I change the radio button, HG doesn't recieve the command.

This is my html file:
<div data-ui-field="widget" class="ui-overlay-shadow ui-corner-all ui-body-inherit hg-widget-a">

        <div class="ui-header ui-bar-inherit" style="padding-left:5px;padding-right:5px;font-weight:normal;">
                <span data-ui-field="name" style="font-weight:bold">Name</span><br />
            <span data-ui-field="description">...</span>
            <a data-ui-field="settings" data-role="button" data-icon="edit" data-iconshadow="false" data-direction="reverse" data-iconpos="notext" class="ui-btn-right">Configuration</a>
            <!--a data-ui-field="options" data-role="button" data-icon="gear" data-iconshadow="false" data-direction="reverse" data-iconpos="notext" class="ui-btn-right">Options</a-->
        </div>

    <br />

    <div class="ui-grid-a">
        <div class="ui-block-a">
                    <img class="hg-widget-icon" data-ui-field="icon" src="pages/control/widgets/homegenie/generic/images/homestate.png" />
        </div>
        <div class="ui-block-b" style="padding-top:8px;width: 40%">
                <fieldset data-role="controlgroup" data-ui-filed="personstate" >
                        <input type="radio" name="personstate" id="personstate-in" value="in" />
                        <label for="personstate-in">In</label>

                        <input type="radio" name="personstate" id="personstate-out" value="out" />
                        <label for="personstate-out">Out</label>

                        <input type="radio" name="personstate" id="personstate-outlong" value="outlong"  />
                        <label for="personstate-outlong">Viaje</label>
                </fieldset>
        </div>
    </div>

        <br />

        <div class="ui-footer ui-bar-inherit hg-widget-footer" align="right">
        <div data-ui-field="status" style="font-size:11pt;display: table-cell;">&nbsp;</div>
        </div>

</div>

This is my json file:

[{
    Name: "Home State",
    Version: "2014-09-03",

        GroupName : '',
        IconImage : 'pages/control/widgets/homegenie/generic/images/homestate.png',
        StatusText : '',
        Description : '',
    UpdateTime : '',

    RenderView: function (cuid, module) {
        var container = $(cuid);
        var widget = container.find('[data-ui-field=widget]');
        //

        if (!this.Initialized)
        {
            this.Initialized = true;
            widget.find('[data-ui-field=personstate]').controlgroup().controlgroup('refresh');
            widget.find('[data-ui-field=personstate]').on('change', function()
            {
                HG.Control.Modules.ServiceCall('Control.' + (this).val(), module.Domain, module.Address, '', function (data) { });
            });

            // settings button
            widget.find('[data-ui-field=settings]').on('click', function(){
               HG.WebApp.ProgramEdit._CurrentProgram.Domain = module.Domain;
               HG.WebApp.ProgramEdit._CurrentProgram.Address = module.Address;
               HG.WebApp.ProgramsList.UpdateOptionsPopup();
            });
        }


        //
        // read some context data
        //
        this.GroupName = container.attr('data-context-group');

        //
        // get module watts prop
        //
        var personstatus = HG.WebApp.Utility.GetModulePropertyByName(module, "Person.Status");
        if (personstatus != null && personstatus.Value == "in")
        {
           widget.find('[data-ui-field=personstate]').val("in").controlgroup('refresh');
           this.StatusText = "IN";
           this.Description = "EN CASA";
        }
        else
        {
           if (personstatus != null && personstatus.Value == "out")
           {
              widget.find('[data-ui-field=personstate]').val("out").controlgroup('refresh');
              this.StatusText = "OUT";
              this.Description = "FUERA DE CASA";
           }
           else
           {
              if (personstatus != null && personstatus.Value == "outlong")
              {
                 widget.find('[data-ui-field=personstate]').val("outlong").controlgroup('refresh');
                 this.StatusText = "OUT LONG (VIAJE)";
                 this.Description = "FUERA DE CASA VIAJE LARGA DURACION";
              }
              else
              {
                 widget.find('[data-ui-field=personstate]').val("desconocido").controlgroup('refresh');
                 this.StatusText = "DESCONOCIDO";
                 this.Description = "DESCONOCIDO";
              }
           }
        }

        var personstate = HG.WebApp.Utility.GetModulePropertyByName(module, "Person.Status");
        //
        // render widget
        //
        widget.find('[data-ui-field=name]').html(module.Name);
        widget.find('[data-ui-field=icon]').attr('src', this.IconImage);
        widget.find('[data-ui-field=status]').html('<span style="vertical-align:middle">' + this.StatusText + '</span>');
        widget.find('[data-ui-field=description]').html(this.Description);
   }
}]


I'm sure that this two lines are wrong, but I can't find a good example which work:

           widget.find('[data-ui-field=personstate]').controlgroup().controlgroup('refresh');
            widget.find('[data-ui-field=personstate]').on('change', function()


Does anybody have an example with radio button and json/jquery working in HG?

Than you very much.