Question

我目前能够将我的Kendo Grid上的所有记录提交回控制器，但它不能反映单选按钮的最新状态。我不想多次点击一个单元格，进入编辑模式，也不想使用编辑按钮。我想简单地选择单选按钮，单击“保存”并将当前状态反映在我的控制器上。

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")))
     )

控制器：

[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（我使用的是因为我在这个视图中有几个标签，有几个网格）

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

让我给你一个视觉......

当网格最初加载时，＆＃34;订单输入＆＃34;选择角色。（未显示）

我现在选择＆＃34;限制用户＆＃34;

enter image description here

当我点击保存时，这就是我在控制器上获得的内容：

enter image description here

我期待第一个是假的，第二个是真的，第三个是假的。

有什么想法吗？

谢谢。

Answer 1

您需要在单选按钮上单击设置模型，让网格知道特定行已设置为脏，因此使用更新的模型值触发更新事件

所以在单选按钮上单击添加..

<强> ***************************网格**************** ***

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

<强> **********************脚本******************** < /强>

//复选框点击功能

    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

Shaz和Jayesh Goyani提供的答案略有修改下面的功能将覆盖其他单选按钮并将其设置为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);
        }
    }

Kendo UI Grid - 如何保存当前的单选按钮状态

2 个答案: