在Kendo与ASP.NET MVC中为删除弹窗添加条件文本
Kendo Grid实现Delete按钮条件文本及弹出确认窗口自定义内容
完全可以实现,分两种场景处理:
一、给Destroy按钮设置动态条件文本
在Grid的列命令配置中,Destroy命令的Text()方法支持基于当前行数据模型的条件表达式,可直接根据每行的字段值动态设置按钮文本:
.Columns(columns => { columns.Bound(o => o.contactID).Hidden(true); columns.Bound(o => o.hoID).Hidden(true); columns.Bound(o => o.label).Width(180); columns.Bound(o => o.descr).Title("Contact"); columns.Command(command => { command.Edit(); // 根据label字段动态设置Delete按钮文本 command.Destroy().Text(model => model.label == "主联系人" ? "删除主联系人" : "删除"); }).Width(172); })
二、点击Delete时弹出带条件文本的确认窗口
要替换默认的删除确认提示,通过Grid的Remove事件自定义确认逻辑:
1. 绑定Grid的Remove事件
在Grid配置中添加事件绑定:
@(Html.Kendo().Grid(Model.contactInfos) .Name("HOAddrListGrid") // ... 其他数据源、工具栏配置 .Events(events => events.Remove("onGridRemove")) // 绑定删除事件 .Sortable() .Selectable() .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("HOContactEdit").Window(w => w.Title("Edit Contact"))) )
2. 编写自定义确认逻辑的JavaScript函数
根据行数据生成条件文本,显示自定义确认框,确认后执行删除,否则取消:
function onGridRemove(e) { // 获取当前行的数据 var dataItem = e.model; // 根据字段生成条件提示文本 var confirmContent = dataItem.label === "主联系人" ? "确定要删除主联系人吗?删除后需重新设置默认主联系人。" : "确定要删除该联系人信息吗?"; // 用浏览器原生confirm实现 if (!confirm(confirmContent)) { // 取消删除操作 e.preventDefault(); } // 若要使用更美观的Kendo Dialog,替换为以下代码: // e.preventDefault(); // 先阻止默认删除流程 // $("#customConfirmDialog").kendoDialog({ // title: "确认删除", // content: confirmContent, // actions: [ // { text: "取消" }, // { text: "确定", primary: true } // ], // close: function(dialogEvent) { // if (dialogEvent.button.text() === "确定") { // // 确认后执行删除 // e.sender.destroy(); // } // } // }).open(); }
内容的提问来源于stack exchange,提问作者user7496931
相关产品推荐
相关产品推荐

