Kendo Grid自定义弹出式编辑器模板
[英]Kendo Grid custom popup editor template
问题描述
我有一个Kendo Grid，它链接到自定义弹出式编辑器模板。 我没有使用Kendo提供的默认“添加”按钮，因为我需要有几个不同的按钮，这些按钮将附加参数传递给绑定到edit事件的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论坛，但是我发现的唯一看似相关的帖子是这篇文章 ，它是尝试使用自定义弹出窗口，而不仅仅是使用编辑器模板。
1 个解决方案
解决方案1
0 2017-06-26 21:15:46
因此，在深入研究之后，我将脚本包声明留在了编辑器模板的顶部，并在模板中重新声明了Kendo javascript函数，这就是导致问题的原因。
删除
<head>
@Scripts.Render("~/bundles/kendo")
</head>
从编辑器模板文件中修复了意外行为。
Kendo ui网格弹出编辑器表单模板-如何在编辑时隐藏某些字段，而不在添加时隐藏某些字段
[英]Kendo ui grid popup editor form template - how to hide some fields on edit and not on add
Kendo Grid自定义弹出式编辑器模板中的jQuery手风琴向导
[英]jQuery Accordion Wizard within Kendo Grid custom pop-up editor template
Kendo UI网格弹出窗口编辑自定义模板-添加多选控件
[英]Kendo UI grid popup edit custom template - Add a multi-select control
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
自定义弹出编辑器 - Kendo UI 网格
Kendo UI Web网格-Popup_Editor模板-下拉菜单
Kendo UI 自定义网格弹窗编辑器 window 只打开一次
Kendo Popup自定义编辑器模板中的Bootstrap手风琴
Kendo ui网格弹出编辑器表单模板-如何在编辑时隐藏某些字段，而不在添加时隐藏某些字段
Kendo UI网格和自定义弹出窗口删除确认
创建自定义编辑器窗口Kendo js网格
自定义剑道网格订单，带有可编辑的弹出窗口
Kendo Grid自定义弹出式编辑器模板中的jQuery手风琴向导
Kendo UI网格弹出窗口编辑自定义模板-添加多选控件
相关标签