Radio Buttons Group in Repeater

[Emil]

Hello,

In the example http://dojo.telerik.com/IdUMu I am trying to have a radio buttons group inside a grid. You can see this is not working. This is the same example http://dojo.telerik.com/oPidE but without class='k-radio-label' and class='k-radio' on the label and on the input type=radio.

 

Can you tell me how to achieve the same behaviour as the working example but with the styling of the kendo radio button.

Thanks.

 

[Ianko]

Hello Emil,

Absolutely the same configuration would not work for the k-radio decoration as the label elements should assigned with the for attribute. 

Even with that, the editing would not work properly as clicking on the label triggers the update command of the grid and exits the edit mode.

With inline editing, however, this might work. Here you are an example: http://dojo.telerik.com/uZuro. 

Regards,

Ianko
Telerik by Progress

 

 

[Emil]

Thanks Ianko,

I am trying to convert this to MVVM. Can you tell me if this is the best way to implement it?

// generate unique attribute value from binding value provided and the uid of the observable
    kendo.data.binders.uid = kendo.data.Binder.extend({
        init: function (element, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
        },
        refresh: function () {
            var uidBinding = this.bindings["uid"];
            for (var propName in uidBinding.path) {
                $(this.element).attr(propName, uidBinding.path[propName] + uidBinding.source.uid)
            }
        }
    });

    // version for kendo widgets
    kendo.data.binders.widget.uid = kendo.data.Binder.extend({
        init: function (element, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
        },
        refresh: function () {
            var uidBinding = this.bindings["uid"];
            for (var propName in uidBinding.path) {
                $(this.element.element[0]).attr(propName, uidBinding.path[propName] + uidBinding.source.uid)
            }
        }
    });

<div class="row">
      <div class="col-xs-3">
        <input type="radio" class="k-radio" value="1" data-bind="checked: isFranchiseComputed, uid: { id: yes, name: group }" />
        <label class="k-radio-label" data-bind="uid: { for: yes }">Yes</label>
      </div>
      <div class="col-xs-9">
        <input type="radio" class="k-radio" value="0" data-bind="checked: isFranchiseComputed, uid: { id: no, name: group }" />
        <label class="k-radio-label" data-bind="uid: { for: no }">No</label>
      </div>
    </div>

[Ianko]

Hello Emil,

Without the scope of the entire situation I am unable to exactly tell whether everything would work fine, but from the code pasted everything seems fine to me. 

Regards,
Ianko
Telerik by Progress