我正在尝试在一行中使用多个Kendo Edit命令。编辑按钮的总数将是6个，以及6个剑道开关。每个命令将具有单独的emailSubject、emailBody和emailAddress，它们与每个交换机相关联。我需要每个命令来打开Kendo弹出窗口，并能够更新相关的emailSubject、emailBody和emailAddress。
这就是我目前所拥有的：JS文件
DailyLimits.Methods.KendoInit = function () {
DailyLimits.Controls.RenderedGrid = DailyLimits.Controls.DailyLimitsGrid.kendoGrid({
dataSource: {
data: emailAlerts,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", validation: { required: true } },
AccountNumber: { type: "string" },
CustomerName: { type: "string" },
Limit: { type: "number" },
CurrentUsage: { type: "number" },
EmailSubject: { type: "string" },
EmailBody: { type: "string" },
FromAddress: { type: "string" },
Alert1: { type: "boolean" },
Alert2: { type: "boolean" },
Alert3: { type: "boolean" },
Alert4: { type: "boolean" },
Alert5: { type: "boolean" },
Alert6: { type: "boolean" }
}
}
},
},
filterable:true,
height: "800px",
groupable: true,
sortable: true,
scrollable: true,
resizable: true,
columnResizeHandleWidth: 5,
columnMenu: true,
toolbar: kendo.template($("#ToolbarTemplate").html()),
columns: [
{ field: "AccountNumber", title: "Account Number", filterable: true, hidden: false, width: 100 },
{ field: "CustomerName", title: "Customer Name", filterable: true, hidden: false, width: 100 },
{ field: "Limit", title: "Daily Credit Limit", format: "{0:c}", filterable: true, hidden: false, width: 100 },
{ field: "CurrentUsage", title: "Current Usage", format: "{0:c}", filterable: true, hidden: false, width: 100 },
{ field: "Alert1", title: "75%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert1-switch" # if(Alert1) {# checked="checked" #} # />" },
{
command: [{
name: "Edit1",
title: "Alert 1 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
{ field: "Alert2", title: "80%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert2-switch" # if(Alert2) {# checked="checked" #} # />" },
{
command: [{
name: "Edit2",
title: "Alert 2 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
{ field: "Alert3", title: "85%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert3-switch" # if(Alert3) {# checked="checked" #} # />" },
{
command: [{
name: "Edit3",
title: "Alert 3 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
{ field: "Alert4", title: "90%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert4-switch" # if(Alert4) {# checked="checked" #} # />" },
{
command: [{
name: "Edit4",
title: "Alert 4 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
{ field: "Alert5", title: "95%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert5-switch" # if(Alert5) {# checked="checked" #} # />" },
{
command: [{
name: "Edit5",
title: "Alert 5 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
{ field: "Alert6", title: "100%", filterable: true, hidden: false, width: 100, "template": "<input type= "checkbox" class="mobileSwitch" id="alert6-switch" # if(Alert6) {# checked="checked" #} # />" },
{
command: [{
name: "Edit6",
title: "Alert 6 Email",
width: "180px",
click: function (e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
console.log("Details for: " + data.AccountNumber);
}
}],
},
],
editable: "popup",
});
以下是我的DailyLimits.aspx文件中的内容，我需要在其中弹出：
<script id="alert1_popup" type="text/x-kendo-template">
<div class="SearchParam">
<label class="control-label" for="txtEmailSubject" style="width:200px">Email Subject</label>
<input name="txtEmailSubject" id="txtEmailSubject" class="k-textbox" style="width:430px"
data-bind="value:Alert1EmailSubject"
/>
</div>
<div class="SearchParam">
<label class="control-label" for="txtEmailBody" style="width:200px">Email Body</label>
<textarea name="txtEmailBody" id="txtEmailBody" style="width:350px"
data-bind="value:Alert1EmailBody"
data-role="kendo.ui.Editor"
></textarea>
</div>
<div class="SearchParam">
<label class="control-label" for="txtFromAddress" style="width:200px">From Address</label>
<input name="txtFromAddress" id="txtFromAddress" class="k-textbox" style="width:430px"
data-bind="value:Alert1FromAddress"
/>
</div>
</script>
您可以在每次点击事件时打开Kendo窗口，并将查询字符串中的唯一参数(在Kendo窗口的数据属性中(传递给窗口，以帮助识别每次点击按钮或保存位置。
我希望这个建议对你有帮助！