我有一个网格和一个细节网格，如下所示：
@(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Dienstverband>()
.Name("overzicht-grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("<span title='${Naam}'>${Naam}</span>").Width(300)
.Filterable(f =>
{
f.Extra(false);
f.Operators(op =>
{
op.ForString(str =>
{
str.Clear().Contains("Bevat");
});
});
});
columns.Bound(d => d.Contractvorm).Title("Contractvorm").ClientTemplate("<span title='${Contractvorm}'>${Contractvorm}</span>").Width(200).Filterable(ftb => ftb.Multi(true));
columns.Bound(d => d.Run1.Netto).Title("periode1").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run1.Netto != 0) { # #= kendo.toString(Run1.Netto, 'n2') # # } #").HeaderHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(d => d.Run2.Netto).Title("Periode 2").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run2.Netto != 0) { # #= kendo.toString(Run2.Netto, 'n2') # # } #").HeaderHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(d => d.VerschilPercentage).Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (VerschilPercentage != 0) { # % #= kendo.toString(VerschilPercentage, 'n2') # # } else { # % 0 # } #").Width(165).Format("{0:P}").HeaderHtmlAttributes(new { style = "text-align:right;" }).Hidden();
columns.Bound(d => d.Verschil).Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (Verschil != 0) { # € #= kendo.toString(Verschil, 'n2') # # } else { # € 0,00 # } #").Width(165).Format("{0: #.00}").HeaderHtmlAttributes(new { style = "text-align:right;" });
})
.Filterable(f => f.Mode(GridFilterMode.Menu))
.Sortable()
.Pageable(pager => pager.PageSizes(new List<object>
{ 25, 50, 100, 200, 500 }))
.ClientDetailTemplateId("overzicht-grid-details")
.Excel(e => e.AllPages(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.ServerOperation(false)
.Model(model =>
{
model.Id(d => d.Id);
model.Field(f => f.Naam);
model.Field(f => f.Contractvorm);
model.Field(f => f.Run1.Netto);
model.Field(f => f.Run2.Netto);
})
.Read(r => r.Action("GetOverzicht", "NettoVergelijking").Data("getData"))
.Sort(d => d.Add(a => a.Verschil).Descending()
)
)
)
<script id="overzicht-grid-details" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Detail>()
.Name("overzicht-grid1-details-#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Omschrijving).Width(270)
.Filterable(false).HeaderTemplate(" ");
columns.Bound(o => o.Belastbaarheid).Width(200).HtmlAttributes(new { style = "cursor:pointer;" });
columns.Bound(o => o.Waarde1).Width(220)
.ClientTemplate("\\# if (Waarde1 != 0 && Waarde1 != null) { \\# \\#= kendo.toString(Waarde1, 'n2') \\# \\# } else { \\# \\# } \\#")
.ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
.FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(o => o.Waarde2).Width(220)
.ClientTemplate("\\# if (Waarde2 != 0 && Waarde2 != null) { \\# \\#= kendo.toString(Waarde2, 'n2') \\# \\# } else { \\# \\# } \\#")
.ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
.FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(o => o.Verschil)
.ClientTemplate("\\# if (Verschil != 0 && Verschil != null) { \\# € \\#= kendo.toString(Verschil, 'n2') \\# \\# } else { \\# € 0 \\# } \\#")
.ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
.FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(o => o.VerschilPercentage)
.ClientTemplate("\\# if (VerschilPercentage != 0 && Verschil != null) { \\# % \\#= kendo.toString(VerschilPercentage, 'n2') \\# % \\# } else { \\# 0 \\# } \\#")
.ClientFooterTemplate("\\#=kendo.toString(sum, 'n2')\\#")
.FooterHtmlAttributes(new { style = "text-align:right;" }).Filterable(false).HeaderTemplate(" ").HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Hidden();
})
.Filterable(f => f.Mode(GridFilterMode.Menu))
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(a =>
{
a.Add(x => x.Waarde1).Sum();
a.Add(x => x.Waarde2).Sum();
a.Add(x => x.Verschil).Sum();
a.Add(x => x.VerschilPercentage).Sum();
})
.Model(model =>
{
model.Id(d => d.Id);
model.Field(f => f.Type);
model.Field(f => f.Omschrijving);
model.Field(f => f.Waarde1);
model.Field(f => f.Waarde2);
model.Field(f => f.Verschil);
model.Field(f => f.VerschilPercentage);
})
.Group(groups => groups.Add(p => p.Type))
.Sort(s => s.Add(a => a.LoonfactorCode).Ascending())
.Read(read => read.Action("GetPeriodeDetails", "NettoVergelijking", new { dienstverbandId = "#=Id#" }).Data("getData"))
)
.ToClientTemplate()
)
我有javascript用于隐藏/显示特定列，如下所示：
$("#euro-switch").kendoMobileSwitch({
onLabel: "%",
offLabel: "€",
change: function (e) {
var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();
var grid = $("#overzicht-grid").data("kendoGrid");
var gridDetail = $("#overzicht-grid-details").data("kendoGrid");
if (e.checked) {
grid.showColumn("VerschilPercentage");
grid.hideColumn('Verschil')
//detail
gridDetail.showColumn("VerschilPercentage");
gridDetail.hideColumn("Verschil");
}
else {
grid.hideColumn("VerschilPercentage");
grid.showColumn("Verschil");
//Detail:
gridDetail.showColumn("VerschilPercentage");
gridDetail.hideColumn("Verschil");
}
var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");
inpbox.setOptions(
{
format: "\\" + label + "\\ #",
decimals: 2
});
inpbox.value(inpbox.value());
}
});
但是我收到消息：索引：611未捕获的TypeError：无法在详细网格上读取未定义的属性'showColumn'。
如果我查看chrome并按F12，那么我会在详细网格中看到id：
概述简单描述-GRID1-细节-329684。所以这是一个数字，但每次都改变了数字。
所以我的问题是：如何解决这个问题，它不会在细节网格中添加数字？
谢谢。
答案 0 :(得分：0)
错误应与您的更改事件处理程序相关，其中gridDetail未定义。
您使用var gridDetail = $("#overzicht-grid-details").data("kendoGrid");定义变量，但正如您所说，ID在模板中使用Id变量定义：.Name("overzicht-grid1-details-#=Id#")。
因此，您可以查询部分ID并迭代结果集：
var detailGrids = $("[id*=overzicht-grid-details]");
detailGrids.forEach((index, detailGrid) => {
gridDetail = gridDetail.data("kendoGrid");
gridDetail.showColumn("VerschilPercentage");
gridDetail.hideColumn("Verschil");
});
解决第一个问题后你会遇到另一个问题： 除非您展开细节网格，否则不会初始化细节网格。因此，如果您切换一个开关，而没有初始化子网格，它将不会隐藏或显示您喜欢的列。
一个简单而又不优雅的解决方案是让开关设置一个global-ish变量，并在dataBound中检查该变量并更改所有网格的事件：
change: function(e) { //do the same for dataBound in the grids and/or refactor in seperate function
if(someVariable === true) { //some variable is set by the switch
//show or hide columns
}
}