Kendo UI Grid 在数据绑定的客户端模板中隐藏控件答案

【问题标题】：Kendo UI Grid hide control in client template on dataBoundKendo UI Grid 在数据绑定的客户端模板中隐藏控件
【发布时间】：2015-12-16 04:36:15
【问题描述】：

我有一个剑道网格视图，我正在使用一个由锚标记和标签组成的客户端模板。我需要做的是在网格视图的onDatabound事件中隐藏锚标记。

这是网格

@(Html.Kendo().Grid(Model.GridView.DataSource)
    .Name("grdRole")
    .Columns(columns =>
             {
                 columns.Command(command => command.Edit()).Width(110);
                 columns.Bound(p => p.Code);
                 columns.Bound(p => p.Name);
                 columns.Bound(p => p.Id).ClientTemplate("<a id='lnkDisplay' href='' onclick='return linkOnClick()'> Display Data</a> <label id='lblShow'> gfhfhf</label> ").Title("Data");

             })  

    .Editable(editable => editable.Mode(GridEditMode.InLine))
         .Events(x =>
                 {
                     x.Edit("onEdit");
                     x.Save("onSave");
                     x.DataBound("onDataBound");
                 })
      .ToolBar(toolBar => toolBar.Create())
    .Sortable(x => x.Enabled(false))
    .Scrollable(x => x.Height("auto"))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Reorderable(reorder => reorder.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
            .Read(read => read.Action("OnGridRead", "Grid"))
                    .Create(create => create.Action("OnGridCreate", "Grid"))
                    .Update(update => update.Action("OnGridUpdate", "Grid"))

    )
)

这就是我尝试做的事情..

 function onDataBound(e) {      
        var trs = this.wrapper.find('.k-grid-content tr');
        trs.each(function () {

           var id = this.childNodes[5].childNodes[0].hide();
        });
});

它给了我以下错误..

TypeError: this.childNodes[5].firstChild.hide 不是函数

【问题讨论】：

它是因为你在DOM元素上调用jquery方法，但它必须是jquery对象

标签： javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

您在选择活动中的锚元素时采用了一种令人困惑的方式。为什么不简化它（并保持完整的 jQuery 而不是混合香草代码）？

$(this.element).find('tr td a').hide()

上述选择器将隐藏网格中的任何锚元素，但如果有其他锚元素，请添加要隐藏元素的类，例如：

.ClientTemplate("<a id='lnkDisplay' class='hide-me-at-data-bound' href='' onclick='return linkOnClick()'> Display Data</a>

那就这样吧：

$(this.element).find('.hide-me-at-data-bound').hide()

DEMO

此外，您遇到的错误是因为您无法在非 jQuery 对象上调用 jQuery 的 .hide()。这 - 如果你的 DOM 导航没问题 - 可能会起作用：

$(this.childNodes[5].childNodes[0]).hide();

^{PS：您所有的模板锚点都具有相同的id，这不是一个好习惯。尽量不要在 html 文档中重复 id。}

【讨论】：