This is a migrated thread and some comments may be shown as answers.
Radio Buttons Group in Repeater
3 Answers 26 Views
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 1
Emil asked on 29 Sep 2016, 03:06 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 03 Oct 2016, 08:22 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Emil
Top achievements
Rank 1
answered on 03 Oct 2016, 09:53 AM

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>

0
Ianko
Telerik team
answered on 04 Oct 2016, 08:40 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Asked by
Emil
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Emil
Top achievements
Rank 1
Share this question
or