我有一个剑道网格,其中有一个复选框,它是使用客户端模板呈现的。如果选中该复选框,那么我希望启用与其相邻的列,如果未选中该复选框,则应禁用该列,即用户不应该能够对其进行编辑或键入。我尝试通过将编辑事件绑定到网格来实现此目的,但仅当网格进入编辑模式时才会调用编辑事件,并且在更改网格时不会调用该函数。非常感谢任何指导。
代码片段:
debugger;
function OnGridChange(e) {
console.log("grid edit mode",e);
var model = $("#AppAccountInternalGrid").data("kendoGrid");
console.log("data source edit mode");
if (e.model.Roll == "true")
$(e.container).find('input[name="RollupName"]').attr("disabled", false);
else
$(e.container).find('input[name="RollupName"]').attr("disabled", true);
}
@(Html.Kendo().Grid(Model.App_Client_Mapping)
.Name("AppAccountInternalGrid")
.Events(ev=>ev.Edit("OnGridChange"))
.Columns(columns =>
{
columns.Bound(p => p.AccountMappingID).Hidden().Title("AccountMappingID").Width(130);
columns.Bound(p => p.ExternalAccount).Title("ExternalAccount").Width(150);
columns.Bound(p => p.Roll).ClientTemplate("<input onchange='OnGridChange(#=AccountMappingID#)' type='checkbox' " +
"#=Roll? 'checked=checked' : '' #" +
"disabled='disabled' </input>").Width(150);
columns.Bound(p => p.RollupName).Title("RollupName").Width(150).HtmlAttributes(new{@class="disabled"});
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
//.Events(ev=>ev.("OnGridChange"))
.PageSize(50)
.Model(model =>
{
model.Id(p => p.AccountMappingID);
}
)
.Update(update => update.Action("Editing_Update", "AppAccounts", new { clientid = @clientid }))
)
)
Roll 在模型中具有 bool 属性,将其呈现为复选框。最初,复选框未选中,因此用户无法编辑汇总名称。但是,当用户进入编辑模式并勾选复选框时,用户应该能够编辑卷名。默认情况下,我希望禁用汇总名称。选中复选框后应启用它。
我在剑道网格中也遇到过类似的情况。您应该知道的一件事是,当网格进入编辑模式时,行的字段将获得焦点。从这个角度来看,你可以做我所做的事情。
答:当网格进入编辑模式时,可以使用字段名称调用您的复选框(在您的示例中为 Roll)。在编辑事件中,您应该检查是否选中了 Roll 元素。您将获得的值将是该行的值。此时,您可以将输入(我猜 RollUpName)设置为禁用
$("#RollUpName").prop("disabled", true);
为了动态工作,您应该在复选框的更改事件上添加一个事件侦听器。可能通过使用某个类并将其输入到您的客户端模板中。每次更改复选框时,将更改的复选框将位于可编辑行中。此时,您可以以相同的方式更改 RollUpName 的可编辑模型。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)