我有以下Kendo网格,这是我的主要网格:
@using Resources;
@using ITSV6.ElysiumDataService;
@using Kendo.Mvc.UI.Html;
@using System.Web.Mvc;
@{
ViewBag.Title = Resource.PayRules;
Layout = "~/Views/Shared/_Layout.cshtml";
var Holidays = (IEnumerable<att_holidays>)ViewData["Holidays"];
var PayCodes = (IEnumerable<att_pay_codes>)ViewData["PayCodes"];
}
<div class="row">
@(Html.Kendo().Grid<att_pay_rules>()
.Name("GridPayRuleDefinition")
.Columns(columns =>
{
columns.Bound(p => p.pr_pay_rule).Hidden();
columns.Bound(p => p.pr_name).Title(Resource.Name).Width("").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false)).Extra(false));
columns.Bound(p => p.att_fixed_rules.fr_name).Title(Resource.FixedRule).Width("").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false)).Multi(true));
columns.ForeignKey(m => m.tr_terminal_rule, (IEnumerable<att_terminal_rules>)ViewData["Terminals"], "tr_terminal_rule", "tr_name")
.HtmlAttributes(new { data_value_primitive = "true" })
.Title(@Resource.TerminalRule);
columns.ForeignKey(m => m.wr_work_rule, (IEnumerable<att_work_rules>)ViewData["WorkRules"], "wr_work_rule", "wr_name")
.HtmlAttributes(new { data_value_primitive = "true" })
.Title(@Resource.WorkRule);
columns.Bound(p => p.pr_laborday_hours)
.Format("{0:n2}")
.Title(Resource.LaborDayHours)
.HeaderHtmlAttributes(new { @style = "text-align:right;" }).HtmlAttributes(new { align = "right" })
.Width("").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false)).Multi(true));
columns.Command(command =>
{
command.Custom("Copy").Text(" ").SendDataKeys(true).Click("copyGridRecord").HtmlAttributes(new { @class = "fa fa-files-o fa-lg", title = Resource.Duplicate + " " + Resource.PayRule });
command.Edit().Text(" ").HtmlAttributes(new { title = Resource.Edit + " " + Resource.PayRule });
command.Destroy().Text(" ").HtmlAttributes(new { title = Resource.Delete + " " + Resource.PayRule });
}).Width(140);
})
.ToolBar(toolbar => toolbar.Create().Text(Resource.AddNewPayRule))
.ToolBar(toolbar => toolbar.Custom().Text(" " + Resource.Print + " " + Resource.Report).HtmlAttributes(new { target = "_blank", @class = "iconPrint" }).Action("GenerateAndView", "Reports", new { subDir = "", reportName = "SetupPayRulesSummary" }))
.ToolBar(toolbar => toolbar.Excel().HtmlAttributes(new { @class = "iconExcel" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("payRuleDefinition").Window(w =>
{
w.Width(485);
w.Title(Resource.PayRule + " " + Resource.Editor);
}
))
.Excel(excel => excel.FileName("PayRules.xlsx").ProxyURL(Url.Action("Excel_Export_Save", "Pay Rules")).Filterable(true).AllPages(true))
.Pageable()
.Sortable()
.Editable(e => e.DisplayDeleteConfirmation(false))
.Scrollable(a => a.Height("100%"))
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.ClientDetailTemplateId("subgrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(pk => pk.pr_pay_rule);
model.Field(f => f.att_fixed_rules).DefaultValue(new att_fixed_rules());
model.Field(f => f.att_terminal_rules).DefaultValue(new att_terminal_rules());
model.Field(f => f.att_work_rules).DefaultValue(new att_work_rules());
})
.Create(update => update.Action("Create", "PayRuleDefinition"))
.Read(read => read.Action("Read", "PayRuleDefinition"))
.Update(update => update.Action("Update", "PayRuleDefinition").Data("ConvertDates"))
.Destroy(destroy => destroy.Action("Destroy", "PayRuleDefinition"))
.Events(ev => ev.Error("handleGridPayRuleDefinition")
.RequestEnd("GridPayRuleDefinition_onRequestEnd")
)
)
.Events(e =>
{
e.Remove("function(args){gridRecord_Remove(args,'GridPayRuleDefinition');}");
})
)
</div>
结果看起来像这样 - 链接添加,我没有足够的“声望点”附加图像,抱歉):Main-Grid
该网格包含信息记录。左侧的每条记录都有一个“+”按钮,该按钮应显示带有Holiday
记录的子网格,可以在InLine模式下进行编辑。子网格的代码看起来像这样:
<script id="subgrid" type="text/kendo-tmpl">
@(Html.Kendo().Grid<att_pay_rules_holidays>()
.Name("grid_#=pr_pay_rule#")
.Columns(columns =>
{
columns.Bound(c => c.pr_pay_rule).Hidden();
columns.ForeignKey(m => m.hdy_holiday, (IEnumerable<att_holidays>)ViewData["Holidays"], "hdy_holiday", "hdy_name")
.HtmlAttributes(new { data_value_primitive = "true" })
.Title(@Resource.Holiday).Width("30%");
columns.ForeignKey(m => m.pc_pay_code, (IEnumerable<att_pay_codes>)ViewData["PayCodes"], "pc_pay_code", "pc_name")
.HtmlAttributes(new { data_value_primitive = "true" })
.Title(@Resource.PayCodes).Width("30%");
columns.Bound(c => c.prh_time_payed).Title(Resource.Hours).Width("20%");
columns.Command(cmd =>
{
cmd.Edit().Text(" ").CancelText(" ").UpdateText(" ").HtmlAttributes(new { title = Resource.Edit + " " + Resource.LaborAccount + " " + Resource.Entry });
cmd.Destroy().Text(" ").HtmlAttributes(new { title = Resource.Delete + " " + Resource.LaborAccount + " " + Resource.Entry });
}).Width("15%");
})
.ToolBar(toolbar => toolbar.Create().Text(" " + Resource.Add + " " + Resource.New + " " + Resource.Holiday).HtmlAttributes(new { @class = "iconAdd" }))
.Editable(e => e.DisplayDeleteConfirmation(false))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(ev => ev.Remove("function(args){ gridRecord_Remove(args,'grid_#=pr_pay_rule#');}"))
.Pageable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
.Sortable()
.DataSource(ds => ds
.Ajax()
.Model(model =>
{
model.Id(p => p.pr_pay_rule);
})
.Read(read => read.Action("ReadHoliday", "PayRuleDefinition").Data("getRulesHolidaysData(#=pr_pay_rule#)"))
.Update(update => update.Action("UpdateHoliday", "PayRuleDefinition"))
.Create(update => update.Action("CreateHoliday", "PayRuleDefinition").Data("function(args){AssignPayRule(args,#=pr_pay_rule#)}"))
.Destroy(destroy => destroy.Action("DestroyHoliday", "PayRuleDefinition"))
.Events(ev => ev.Error("function(args){handleGridError(args, 'grid_#=pr_pay_rule#')}"))
)
.Events(e =>
{
e.Remove("function(args){gridRecord_Remove(args,'grid_#=pr_pay_rule#');}");
})
.ToClientTemplate()
)
</script>
结果如下:Sub-Grid displayed
子网格应包含有关Holidays
信息的记录。如您所见,外键列填充如下:
columns.ForeignKey(m => m.hdy_holiday, (IEnumerable<att_holidays>)ViewData["Holidays"], "hdy_holiday", "hdy_name")
问题是当我点击主网格中任何一个记录中的“+”按钮时,子网格变得无效,我猜是由于外键列。如果我在尝试显示Holiday
记录时打开Google Chrome控制台,则会出现“Uncaught SyntaxError:Invalid or unexpected token”错误。当正在编辑Holiday
记录或正在创建新的PayCode
记录时,子网格上的每个外键列都应生成带有Holiday
和Holiday
选项的DropDownList。但这不是正在发生的事情。
有什么建议?
[编辑1]
如果我将模式从InLine更改为PopUp并扩展列,则问题就消失了。但不幸的是,这是不允许的。必须在InLine模式下编辑记录。
我遇到了类似的问题,我想要内联编辑,但也有分层网格。这是他们的代码示例的链接,这激励我采取一定的方向。实现这一切的关键之一是确保在共享视图中定义所需的任何“下拉”类型的内联编辑。
https://www.telerik.com/support/code-library/grid-ajax-hierarchy-editing