Radio group checked binding and templates - does not work

8 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 06 Sep 2012 Link to this post

    I do following: my view model has an "items" array, what I want to render as a radio group via template and source binding:
    var viewModel = kendo.observable({
        selectedValue:"1",
        id:"radiogroup",
        items:[
            {caption:"item_0", value:"0"},
            {caption:"item_1", value:"1"},
            {caption:"item_2", value:"2"}
        ]
    });

    and html:
    <div id="test">
        Selected Value: <span data-bind="text:selectedValue"></span>
        <div data-bind="source:items" data-template="radio-template"></div>
    </div>
     
    <script id="radio-template" type="text/x-kendo-template">
        <div>
            <input type="radio" data-bind="attr:{name:id}, value:value, checked:selectedValue" />
            <label data-bind="text:caption"></label>
        </div>
    </script>

    Fiddle:
    http://jsfiddle.net/ctbcZ/7/ 

    It renders correctly, but if I select radio button it does not fire changing "selectedValue"

    Actually, in this scenario "checked" binding should be applied to parent model, but as far as I understood, in a nested model I have both parent and child model, is this correct? If yes, this is very bad, because values from nested models overwrites parent if they have same name.

    Is it possible in template refer only to current model ("data" does not work for example for "value" binding)?

    Is it possible to refer parent model members, or send a link to parent model as template option? I need at least 2 things from parent model: name, which should be the same for radios and selectedValue to set.

    Why selectedValue in my example does not changes?

    Please help

  2.
  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 12 Sep 2012 Link to this post

    Hi Alex,

    Indeed, this is an issue with the current implementation of our MVVM. However, I'm happy to inform you that we were able to address it. I have also updated your telerik points. 

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Lei
    Lei avatar
    4 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    The winter release 2012.3.1114 seems fixed this issue. I updated the resources in your example and it passed: http://jsfiddle.net/ctbcZ/26/
  7. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 04 Dec 2012 Link to this post

    Hi!
    I've checked your fiddle, binding works, but now initial binding does not work!
    In this example initial value is "1", but item is not selected
  8.
  9. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 04 Dec 2012 Link to this post

    Hi Alex,

    The initial value is not selected in this case as the value binding is applied after all other bindings. At the point when the checked binding is executed the input element does not have it value set, thus it will not be selected. Changing the value attribute to be set through the attr binding, should correct this issue.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Nee
    Nee avatar
    2 posts
    Member since:
    Apr 2015

    Posted 23 Apr 2015 Link to this post

    I HAVE SAME ISSUE 

     SEE BELOW CODE  

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
    </head>
    <body>
      
      <script type="text/x-kendo-template" id="radiosSubject">
        <input data-value-primitive="true" type="radio" name="subject" data-bind="checked: group" data-value-field="Code" data-text-field="Label" value="#: Code #" />
        <label for="subject#: Code #">#: Label #</label>
    </script>
      
      
      
        <div id="view">
          <fieldset><legent> last two radio not working ? WHY? </legend>
          <div id="mysubject" data-template="radiosSubject" data-bind="source: Subjects"></div>
          </fieldset>
          
            <input type="checkbox" name="items" data-bind="checked: items" value="bike"/>
            <input type="checkbox" name="items" data-bind="checked: items" value="-1" data-type="number"/>
            <input type="checkbox" name="items" data-bind="checked: items" value="true" data-type="boolean"/>
            <input type="checkbox" name="items" data-bind="checked: items" value="2015-01-31" data-type="date"/>

            <input type="radio" name="group" data-type="date" data-bind="checked: group" value="2015-01-31"/>
            <input type="radio" name="group" data-type="datetime-local" data-bind="checked: group" value="2013-06-05T23:13:40"/>
            <input type="radio" name="group" data-type="text" data-bind="checked: group" value="Hello"/>
            <input type="radio" name="group" data-type="number" data-bind="checked: group" value="3.14"/>
            <input type="radio" name="group" data-type="boolean" data-bind="checked: group" value="false"/>
        </div>
        <script>
            var viewModel = kendo.observable({
                items: [-1, true],
                group: kendo.parseDate("2015-01-31", "yyyy-MM-dd"),
              Subjects: [{
                            "Code": "MAT",
                            "Label": "Mathematics"
                        },
                        {
                            "Code": "RED",
                            "Label": "Reading"
                        },
                        {
                            "Code": "SCI",
                            "Label": "Science"
                        },
                        {
                            "Code": "WRI",
                            "Label": "Writing"
                        }
                    ]
            });
            kendo.bind($("#view"), viewModel);
            viewModel.bind("change", function(e){
                console.log(e.field, "=", this.get(e.field));
            });
        </script>
    </body>
    </html>

  13. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 24 Apr 2015 Link to this post

    Hi Nee,

    The issue you are experiencing is caused by incorrect template. As you may know, the template should have single root element when using source binding. However, in your case this is not true as every template instance is producing two root elements. Thus the last four items are not bound at all. Changing the template to have single root element, for example by wrapping the input into the label you correct the behavior you are observing.

    <script type="text/x-kendo-template" id="radiosSubject">  
          <label><input type="radio" name="subject" data-bind="checked: group" value="#: Code #" />#: Label #</label>  
    </script>


    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14.
  15. Nee
    Nee avatar
    2 posts
    Member since:
    Apr 2015

    Posted 24 Apr 2015 in reply to Rosen Link to this post

    Thank you Rosen

    Its fixed my issue. 

     Appreciate your quick response .

     Thank you

    Nee

Back to Top