【发布时间】：2017-11-27 04:35:54
【问题描述】：
我有一个链接到自定义弹出编辑器模板的 Kendo Grid。我没有使用 Kendo 提供的默认添加按钮，因为我需要几个不同的按钮，它们将附加参数传递给绑定到编辑事件的 on_edit 函数。我第一次单击添加按钮时一切正常，但是一旦在编辑器窗口上单击取消按钮，按下任何添加按钮都会导致网格中出现一个空白行（就像由编辑器填充一样） ，但弹出式编辑器窗口本身不会出现。当我完全从等式中删除模板时，代码一切正常，这让我认为问题不在于我的自定义添加按钮，而在于编辑器模板。
网格声明
@(Html.Kendo().Grid<ScheduleProcess.Process>
()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.TriggerName);
columns.Bound(c => c.Description);
columns.Bound(c => c.Category);
columns.Bound(c => c.Enabled).ClientTemplate("<input type='checkbox' ${ Enabled == true ? checked='checked' : '' } disabled />").Width(75);
columns.ForeignKey(c => c.TriggerType, EnumHelper.GetSelectList(typeof(ScheduleProcess.TriggerTypes)).ToList(), "Value", "Text");
columns.Bound(c => c.LastRun).Format("{0:MM/dd/yy hh:mm:ss tt}");
columns.Bound(c => c.LastUnSuccessfulRun).Format("{0:MM/dd/yy hh:mm:ss tt}");
columns.Bound(c => c.EventId);
columns.Command(c => c.Edit().UpdateText("Save"));
columns.Command(c => c.Destroy());
//Hidden Columns
columns.ForeignKey(c => c.ProcessThreadType, EnumHelper.GetSelectList(typeof(ScheduleProcess.ThreadType)).ToList(), "Value", "Text").Hidden(true);
columns.Bound(c => c.RunInterval).Hidden(true);
})
.HtmlAttributes(new { style = "height: 750px;" })
.Resizable(resize => resize.Columns(true))
.Scrollable(scrollable => scrollable.Virtual(true))
.Sortable()
.Selectable()
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("ProcessesEditor"))
.ToolBar(toolbar =>
{
toolbar.Template(
@<text>
@(Html.Kendo().Button()
.Content("Add One Time Trigger")
.Name("OneTimeTriggerAdd")
.Events(e => e.Click("AddOneTimeTrigger"))
)
@(Html.Kendo().Button()
.Content("Add Interval Trigger")
.Name("IntervalTriggerAdd")
.Events(e => e.Click("AddIntervalTrigger"))
)
@(Html.Kendo().Button()
.Content("Add Daily Trigger")
.Name("DailyTriggerAdd")
.Events(e => e.Click("AddDailyTrigger"))
)
@(Html.Kendo().Button()
.Content("Add Weekly Trigger")
.Name("WeeklyTriggerAdd")
.Events(e => e.Click("AddWeeklyTrigger"))
)
@(Html.Kendo().Button()
.Content("Add Monthly Trigger")
.Name("MonthlyTriggerAdd")
.Events(e => e.Click("AddMonthlyTrigger"))
)
<br /><br />
Category:
@(Html.Kendo().MultiSelect()
.Name("CategoryMS")
.BindTo((System.Collections.IEnumerable)ViewData["Categories"])
.DataTextField("Category")
.DataValueField("Category")
.Events(e => e.Change("Refresh"))
.AutoClose(false)
)
@(Html.Kendo().Button()
.Name("Refresh")
.Events(e => e.Click("Refresh"))
.Content("Search")
)
<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export</a>
</text>);
})
.Excel(excel => excel
.FileName("Process_Export.xlsx")
)
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.Error("onError").RequestEnd("update_grid"))
.Model(model => {
model.Id(a => a.TriggerId);
model.Field(a => a.TriggerId).DefaultValue(0);
model.Field(a => a.Category);
model.Field(a => a.DayOfWeek);
model.Field(a => a.Description);
model.Field(a => a.DisableAfterFailure);
model.Field(a => a.Enabled);
model.Field(a => a.EstimatedProcessRunTime);
model.Field(a => a.EventId);
model.Field(a => a.LastRun).DefaultValue(DateTime.MinValue);
model.Field(a => a.LastUnSuccessfulRun).DefaultValue(DateTime.MinValue);
model.Field(a => a.MethodParameters);
model.Field(a => a.ProcessParameters);
model.Field(a => a.ProcessThreadType);
model.Field(a => a.Retries);
model.Field(a => a.RunEvery);
model.Field(a => a.RunEveryDays);
model.Field(a => a.RunEveryWeeks);
model.Field(a => a.RunInterval);
model.Field(a => a.RunOnDay);
model.Field(a => a.RunOnDayOf);
model.Field(a => a.RunOnlyOnWeekdays);
model.Field(a => a.RunOnWeek);
model.Field(a => a.RunProcess);
model.Field(a => a.SelectedEndpointName);
model.Field(a => a.SelectedMethodName);
model.Field(a => a.ServiceAddress);
model.Field(a => a.StartDate);
model.Field(a => a.StartTime);
model.Field(a => a.TriggerName);
model.Field(a => a.TriggerType);
model.Field(a => a.WaitTimeTillRetry);
model.Field(a => a.WeekType);
})
.Create(update => update.Action("Process_Create", "Grid"))
.Update(update => update.Action("Process_Update", "Grid"))
.Destroy(update => update.Action("Process_Destroy", "Grid"))
.Read(read => read.Action("Process_Read", "Grid"))
.PageSize(500)
)
)
注意：
替换
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("ProcessesEditor"))
与
.Editable(edit => edit.Mode(GridEditMode.PopUp))
恢复所有预期功能并彻底解决问题。
添加按钮的 Javascript 函数
function AddOneTimeTrigger() {
NewTriggerType = "4"; //OneTime
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
function AddIntervalTrigger() {
NewTriggerType = "0"; //Interval
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
function AddDailyTrigger() {
NewTriggerType = "1"; //Daily
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
function AddWeeklyTrigger() {
NewTriggerType = "2"; //Weekly
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
function AddMonthlyTrigger() {
NewTriggerType = "3"; //Monthly
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
编辑器模板
@model ScheduleProcess.Process
@Html.HiddenFor(model => model.TriggerId)
@* Name *@
<div style="text-align:center">
@Html.LabelFor(model => model.TriggerName, new { style = "color:#00FF00" })
@Html.TextBoxFor(model => model.TriggerName, new { style = "width:75%; font-size:90%" })
</div>
@* Description *@
<div style="text-align:center">
@Html.LabelFor(model => model.Description, new { style = "color:#ffff99; font-size:80%" })
@Html.TextBoxFor(model => model.Description, new { style = "width:75%; font-size:90%" })
</div>
@* Category *@
<div style="text-align:center">
@Html.LabelFor(model => model.Category, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.Category)
</div>
@* Enabled *@
<div style="text-align:center">
@Html.LabelFor(model => model.Enabled, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.Enabled)
</div>
@* Disable After Failure *@
<div style="text-align:center">
@Html.LabelFor(model => model.DisableAfterFailure, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.DisableAfterFailure)
</div>
@* Process Thread Type *@
<div style="text-align:center">
@Html.LabelFor(model => model.ProcessThreadType, new { style = "color:#00FF00" })
@Html.EditorFor(model => model.ProcessThreadType)
</div>
@* Estimated Process Run Time *@
<div style="text-align:center">
@Html.LabelFor(model => model.EstimatedProcessRunTime, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.EstimatedProcessRunTime)
</div>
@* Number of Tries *@
<div style="text-align:center">
@Html.LabelFor(model => model.Retries, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.Retries)
</div>
@* Wait Time Until Retry *@
<div style="text-align:center">
@Html.LabelFor(model => model.WaitTimeTillRetry, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.WaitTimeTillRetry)
</div>
@* Service Address *@
<div style="text-align:center">
@Html.LabelFor(model => model.ServiceAddress, new { style = "color:#00FF00" })
@Html.TextBoxFor(model => model.ServiceAddress, new { style="width:75%; font-size:70%"})
</div>
@* Endpoint Name *@
<div style="text-align:center">
@Html.LabelFor(model => model.SelectedEndpointName, new { style = "color:#00FF00" })
@Html.TextBoxFor(model => model.SelectedEndpointName, new { style = "width:75%; font-size:90%" })
</div>
@* Process Name *@
<div style="text-align:center">
@Html.LabelFor(model => model.SelectedMethodName, new { style = "color:#00FF00" })
@Html.TextBoxFor(model => model.SelectedMethodName, new { style = "width:75%; font-size:90%" })
</div>
@* Process Parameters *@
<div style="text-align:center">
@Html.LabelFor(model => model.MethodParameters, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.MethodParameters)
</div>
@* Process Parameters(| delimeter) *@
<div style="text-align:center">
@Html.LabelFor(model => model.ProcessParameters, new { style = "color:#ffff99; font-size:80%" })
@Html.TextBoxFor(model => model.ProcessParameters, new { style = "width:75%; font-size:90%" })
</div>
@* Event Log ID *@
<div style="text-align:center">
@Html.LabelFor(model => model.EventId, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.EventId)
</div>
@* Trigger Type *@
<div style="text-align:center">
@Html.LabelFor(model => model.TriggerType, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.TriggerType)
</div>
@* Last Successful Run *@
<div style="text-align:center">
@Html.LabelFor(model => model.LastRun, new { style = "color:#ffff99; font-size:80%" })
@(Html.TextBoxFor(model => model.LastRun, "{0:MM/dd/yyyy hh:mm:ss tt}", new { type = "datetime-local" }))
</div>
@* Last Attempted Run *@
<div style="text-align:center">
@Html.LabelFor(model => model.LastUnSuccessfulRun, new { style = "color:#ffff99; font-size:80%" })
@Html.TextBoxFor(model => model.LastUnSuccessfulRun, "{0:MM/dd/yyyy hh:mm:ss tt}", new { type = "datetime-local" })
</div>
@* Run Interval *@
<div style="text-align:center" id="RunIntervalDiv">
@Html.LabelFor(model => model.RunInterval, new { style = "color:#ffff99; font-size:80%" })
@Html.Kendo().IntegerTextBoxFor(model => model.RunInterval.Hours).HtmlAttributes(new { style = "width: 30px;" }).Spinners(false).Max(23).Min(0).RestrictDecimals(true).Decimals(0).Format("00") :
@Html.Kendo().IntegerTextBoxFor(model => model.RunInterval.Minutes).HtmlAttributes(new { style = "width: 30px;" }).Spinners(false).Max(59).Min(0).RestrictDecimals(true).Decimals(0).Format("00") :
@Html.Kendo().IntegerTextBoxFor(model => model.RunInterval.Seconds).HtmlAttributes(new { style = "width: 30px;" }).Spinners(false).Max(59).Min(0).RestrictDecimals(true).Decimals(0).Format("00")
</div>
@* Start Date *@
<div style="text-align:center">
@Html.LabelFor(model => model.StartDate, new { style = "color:#ffff99; font-size:80%" })
@(Html.Kendo().DatePickerFor(model => model.StartDate))
</div>
@* Start Time *@
<div style="text-align:center">
@Html.LabelFor(model => model.StartTime, new { style = "color:#ffff99; font-size:80%" })
@(Html.Kendo().TimePickerFor(model => model.StartTime))
</div>
@* Run Only On Weekdays *@
<div style="text-align:center" id="RunOnlyOnWeekdaysDiv">
@Html.LabelFor(model => model.RunOnlyOnWeekdays, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunOnlyOnWeekdays)
</div>
@* Run Every *@
<div style="text-align:center" id="RunEveryDiv">
@Html.LabelFor(model => model.RunEvery, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunEvery)
</div>
@* Days *@
<div style="text-align:center" id="RunEveryDaysDiv">
@Html.LabelFor(model => model.RunEveryDays, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunEveryDays)
</div>
@* Run Every Week *@
<div style="text-align:center" id="RunEveryWeeksDiv">
@Html.LabelFor(model => model.RunEveryWeeks, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunEveryWeeks)
</div>
@* Run On *@
<div style="text-align:center" id="RunOnDayDiv">
@Html.LabelFor(model => model.RunOnDay, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunOnDay)
</div>
@* Day *@
<div style="text-align:center" id="RunOnDayOfDiv">
@Html.LabelFor(model => model.RunOnDayOf, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunOnDayOf)
</div>
@* Run On the *@
<div style="text-align:center" id="RunOnWeekDiv">
@Html.LabelFor(model => model.RunOnWeek, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.RunOnWeek)
</div>
@* Week *@
<div style="text-align:center" id="WeekTypeDiv">
@Html.LabelFor(model => model.WeekType, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.WeekType)
</div>
@* Day of Week *@
<div style="text-align:center" id="DayOfWeekDiv">
@Html.LabelFor(model => model.DayOfWeek, new { style = "color:#ffff99; font-size:80%" })
@Html.EditorFor(model => model.DayOfWeek)
</div>
我搜索了 StackOverflow 和 Telerik 论坛，但我发现的唯一看似相关的帖子是 this one，这是尝试使用自定义弹出窗口，而不仅仅是使用编辑器模板。
【问题讨论】：
标签： javascript kendo-ui telerik kendo-grid kendo-asp.net-mvc