如何按网格详细信息隐藏列？

Question

我有一个网格和一个细节网格，如下所示：

@(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());
            }

        });

但我收到消息：Index:611 Uncaught TypeError: Cannot read 属性 'showColumn' of undefined on the detail grid.

如果我查看 chrome 并按 F12，那么我会看到详细信息网格的 ID：

overzicht-grid1-details-329684。数字也是如此，但数字每次都在变化。

所以我的问题是：如何解决这个不会向详细信息网格添加数字的问题？

谢谢。

Answer 1

错误应该与您的更改事件处理程序有关，其中 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");
});

你会运行在解决第一个问题后进入另一个问题：除非您展开它，否则不会初始化详细信息网格。因此，如果您切换开关，则在未初始化子网格的情况下，它不会按您的喜好隐藏或显示列。

一个简单但不优雅的解决方案是让开关设置一个全局变量并检查该变量，在所有网格的数据绑定和更改事件中：

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
    }
}

如何按网格详细信息隐藏列？

How to hide column by grid details?

c#

kendo-grid

kendo-asp.net-mvc