Kendo UI Grid在dataBound上的客户端模板中隐藏控件

时间:2015-12-16 04:36:15

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

我有一个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不是函数

1 个答案:

答案 0 :(得分: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