Update dataSource on Radiobutton Change

[crazy05]

Hello,

My Kendo Grid Template is below. If user changes radio button, I want to update dataSource. How can I do this ?

<script type="text/x-kendo-template" id="SiteTemplate">
    <tr class='k-alt'>
        <td>#: Name #</td>
        <td>
            #if(AccessType == 'Read') { #
            <input type="radio" name="#: Id #" class="read" checked="checked" />
            #}else{#
            <input type="radio" name="#: Id #" class="read" />
            # } #
        </td>
        <td>
            #if(AccessType == 'ReadWrite') { #
            <input type="radio" name="#: Id #" class="readWrite" checked="checked" />
            #}else{#
            <input type="radio" name="#: Id #" class="readWrite"/>
            # } #
        </td>
        <td>
            #if(AccessType == 'None') { #
            <input type="radio" name="#: Id #" class="None" checked="checked" />
            #}else{#
            <input type="radio" name="#: Id #" class="None"  />
            # } #
        </td>
    </tr>
</script>

[Daniel]

Hello,

Basically, you should handle the radio buttons click or change event and set the value to the model

$("#grid").on("click", ":radio", function() {
    var grid = $("#grid").data("kendoGrid");
    var radio = $(this);
    var item = grid.dataItem(radio.closest("tr"));
    var value;
    if (radio.hasClass("read")) {
        value = "Read";
    } else if (radio.hasClass("readWrite")) {
        value = "ReadWrite";
    } else {
        value = "None";
    }
    item.set("AccessType", value);
});

If the grid is bound via source binding then you could also use checked binding for the radio buttons:

<script type="text/x-kendo-template" id="SiteTemplate">
    <tr class='k-alt'>
        <td>#: Name #</td>
        <td>
           <input type="radio" name="#: Id #" value="Read" class="read" data-bind="checked:AccessType" />
        </td>
        <td>
            <input type="radio" name="#: Id #" value="ReadWrite" class="readWrite" data-bind="checked:AccessType" />
        </td>
        <td>
            <input type="radio" name="#: Id #" value="None" class="None" data-bind="checked:AccessType" />
        </td>
    </tr>
</script>

Regards,
Daniel
Telerik