Kendo UI dataBound 客户端模板中的网格隐藏控件

Question

我有一个 kendo 网格视图，我正在使用一个由锚标记和标签组成的客户端模板。我需要做的是在网格视图的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 is not a function

Answer 1

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

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

上面的选择器将隐藏网格中的任何锚元素，但如果有另一个锚元素，请在其中添加一个 class 要隐藏的元素，例如：

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

Kendo UI dataBound 客户端模板中的网格隐藏控件

Kendo UI Grid hide control in client template on dataBound

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc