Binding radio buttons - changed event?

1 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2012 Link to this post

    Hi

    I'm successfully binding a group of radio buttons to a ViewModel using a checked binding and also using the click event binding to refresh a Chart. It works wonderfully when the mouse is used to click the radio button as would be expected, but when the keyboard is used to change the selected radio button, things don't work as well: firstly, my click event handler still fires (much as it would if it were called "changed" or similar), the chart refreshes, but the value isn't updated by the checked binding. I thought perhaps the order of binding declarations in my markup mattered, but it makes no difference.

    Markup:
    <input id="activitiesThisMonth" value="A" type="radio" name="activitiesDuration" data-bind="checked: activitiesDuration, click: activitiesChanged" />
    <label for="activitiesThisMonth">This Month</label>
    <input id="activitiesThisWeek" value="W" type="radio" name="activitiesDuration" data-bind="checked: activitiesDuration, click: activitiesChanged" />
    <label for="activitiesThisWeek">This Week</label>

    Script:
    var viewModel = kendo.observable({
        activitiesDuration: "W",
        activitiesChanged: function (e) {
            $("#activitiesChart").data("kendoChart").refresh();
        }
    });
     
    kendo.bind($("input"), viewModel);

    Is this the expected behaviour? I there perhaps a workaround to achieve what I wish to do? I tried binding the jQuery change event to the radio buttons directly, but the event handler didn't fire at all when changed with the keyboard.

    I look forward to a response, kind regards,
    Andrew
Back to Top