Radio Buttons Group in Repeater

4 posts, 0 answers
  1. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 29 Sep Link to this post

    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.

     

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 03 Oct Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 03 Oct in reply to Ianko Link to this post

    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>

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 04 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready