Kendo UI Grid - How to save current radio button state

Question

I am currently able to submit all records on my Kendo Grid back to the controller, but it does not reflect the latest state of the radio button. I dont want to have to click on a cell multiple times, to go into edit mode, nor use an edit button. I want to simply be able to make a radio button selection, click save and have the current state be reflected on my controller.

Razor View

@model IEnumerable<ECM.DAL.ViewModels.Roles.AcctAppUserRoles>

@using ECM.DAL.Infrastructure.Managers
@using GridEditMode = Kendo.Mvc.UI.GridEditMode
@{
    ViewBag.applicationType = (int)SystemWideConfiguration.ApplicationTypes.ECM;
    ViewBag.acctId = RightsManager.AccountId;
}

@(Html.Kendo().Grid(Model)
    .Name("EcmRolesGrid")
    .Columns(columns =>
                 {
                     columns.Bound(x => x.IsActive).Width(46)
                            .ClientTemplate("<input type='radio' name='isActive' value='#= IsActive #' # if (IsActive) { # checked='checked' # } # />")
                            .Title("Select Role")
                            .HtmlAttributes(new {style = "text-align:center"});
                     columns.Bound(r => r.RoleName).Width(75);
                     columns.Bound(r => r.RoleDescription).Width(125);
                 })
    .HtmlAttributes(new { style = "height:340px;" })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model => model.Id(p => p.UserId))
        .Read(read => read.Action("GetApplicationAndAccountRoles", "User", new { applicationType = ViewBag.applicationType, acctId = ViewBag.acctId, userId = ViewBag.EcmRoleUserId.ToString() }))
        .Update(update => update.Action("SaveApplicationRoles", "User")))
     )

Controller:

[AcceptVerbs(HttpVerbs.Post)]
        [HandleAjaxReturnableException]
        public void SaveApplicationRoles(IEnumerable<AcctAppUserRoles> updatedRoles)
        {
            var userRoleDal = new UserRoleDal();
            var roleDal = new RoleDal();

            var applicationId = Guid.Empty;
            var userId = Guid.Empty;

            if (updatedRoles != null)
            ...

Javascript (I am using this because I have several tabs in this view with several grids)

function EcmRolesGridHasChanges() {
        $.ajax({
            url: 'user/SaveApplicationRoles',
            cache: false,
            type: 'POST',
            contentType: 'application/json;', 
            charset:'utf-8',
            data: JSON.stringify($("#EcmRolesGrid").data().kendoGrid._data)
        });
    }

Let me give you a visual as well....

When the grid is initially loaded the "Order Entry" Role is selected. (Not showed)

I'll now choose "Limited User"

When I click save this is what I get on the controller:

I was expecting the first one to be false, second true and third false.

Any ideas?

Thank you.

Answer 1

You need to set the model on radio button click to let the grid know that particular row has been set as dirty therefore fire update event with updated model values

so add this on radio button click..

***************************Grid*******************

columns.Bound(x => x.IsActive).Width(46)
.ClientTemplate("<input type='radio' name='isActive' value='#= IsActive #' # if (IsActive) { # checked='checked' # } # onclick='radioBoxClick(this)' />")

**********************Script********************

//checkbox click function

    function radioBoxClick(e) {

        grid = $("kendoGrid").data().kendoGrid;
        var dataItem = grid.dataItem($(e).closest('tr'));
        var model = grid.dataSource.get(dataItem.UserId);          
        model.set("isActive", e.checked ? 1 : 0);        

    }

Answer 2

Minor modification to the answer that Shaz and Jayesh Goyani provided.
The function below goes over the other radio buttons and sets it to false.

        function radioBoxClick(e) {

        var grid = $("#EcmRolesGrid").data().kendoGrid;
        var elementCount = grid.dataSource._data.length;
        var dataItem = grid.dataItem($(e).closest('tr'));
        var model = grid.dataSource.get(dataItem.RoleId);

        model.set("IsActive", e.checked ? 1 : 0);

        for (var i = 0; i < elementCount; i++) {
            var elem = grid.dataSource._data[i];

            if (elem.RoleId != model.RoleId)
                elem.set("IsActive", 0);
        }
    }