剑道网格隐藏/显示删除按钮答案

【问题标题】：Kendo Grid Hiding/Showing Delete button剑道网格隐藏/显示删除按钮
【发布时间】：2013-11-11 16:30:52
【问题描述】：

我是 Kendo MVC 组件以及 jQuery 的新手。

我正在构建一个剑道网格。我想在页面加载时隐藏网格中的销毁（删除）命令。之后，当我单击页面上的按钮时，它应该是可见的。

剑道网格：

@(Html.Kendo().Grid<Model>() 
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(product => product.DESCRIPTION).Title("Description");
        columns.Bound(product => product.CODE).Title("Description");
        columns.Command(commands =>
        {
            commands.Destroy().HtmlAttributes(new { id = "buttondelete" }); 
        }).Title("Operations");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create().Text("Add Records"); 
        toolbar.Save(); 
    })
                                 
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .Pageable(pager => pager
        .PageSizes(true)
        .Input(true)
        .Refresh(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Events(events => events.Error("onError"))
        .Model(model =>
        {
            model.Id(product => product.ID); // Specify the property which is the unique identifier of the model
            model.Field(p => p.DESCRIPTION).Editable(false);
            model.Field(product => product.CODE).Editable(false);
        })
        .Create(create => create.Action("a", "www")) 
        .Read(read => read.Action("b", "www"))  
        .Update(update => update.Action("c", "www"))  
        .Destroy(destroy => destroy.Action("d", "www")) 
    )
)

JS：

<script type="text/javascript">

    $(document).ready(function () {
        //$("#grid").find(".k-grid-delete").hide() // hide delete button
        $("#grid").find(".k-toolbar").hide(); // hide toolbar
        $(".k-grid-delete", "#grid").hide();
    });
    
    $('#EnableEdit').click(function () {
        $("#grid").find(".k-toolbar").show();
        
        // $(".k-grid-delete", "#grid").show();
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.at(0).fields["CODE"].editable = true;
        grid.dataSource.at(0).fields["DESCRIPTION"].editable = true;
    });

</script>

编辑：根据第一个答案更改了一些部分。现在 $(".k-grid-delete", "#grid").hide(); 无法隐藏 k.grid-delete 类。我猜 JavaScript 是在创建剑道网格之前加载的。当我在编辑按钮的点击功能中使用它时，它会隐藏删除按钮。

【问题讨论】：

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

【解决方案1】：

如果您对每一列使用相同的id，那么您有许多元素具有相同的id，这是不合法的。尝试使用标识 delete 按钮的 CSS 类属性，并在创建（页面加载）时隐藏它，然后单击显示它。

隐藏它们的代码

$(".k-grid-delete", "#grid").hide();

显示它们的代码

$('#EnableEdit').click(function () {
    $(".k-grid-delete", "#grid").show();
});

此处为 JSFiddle 示例：http://jsfiddle.net/OnaBai/pSgeD/

【讨论】：

感谢您的回答，由于某种原因 $(".k-grid-delete", "#grid").hide() 函数无法隐藏 .k-grid-delete css 类。我试图在 $(document).ready(function (){ }); 内部使用它，仍然没有用。当我这样使用它时： $('#EnableEdit').click(function () { $(".k-grid-delete", "#grid").hide(); });当我单击按钮时它会隐藏按钮。
您需要在创建网格后执行$(".k-grid-delete", "#grid").hide()，仅在$(document).ready(function (){ }); 中无效，因为网格也是在ready 上创建的。您需要确保在网格初始化之后执行此操作。另一种可能性是在dataBinding 事件上进行。

【解决方案2】：

要更改剑道网格设置，您必须重新创建网格。如果您绑定到远程数据，您可以注释掉“for offlide data”。

setGridReadOnly: function (gridId, isReadOnly) {

    var grid;

    grid = $("#" + gridId).data("kendoGrid");

    var myOpt = grid.options;
    myOpt.editable.create = !isReadOnly;
    myOpt.editable.destroy = !isReadOnly;
    myOpt.editable.update = !isReadOnly;
    if (isReadOnly == true)
        myOpt.editable.mode = "null";
    else
        myOpt.editable.mode = "inline";

    //for offlide data.
    var data = grid._data;
    //

    grid.destroy();

    $("#" + gridId).kendoGrid(myOpt).data("kendoGrid");

    //for offlide data.
    $("#" + gridId).data("kendoGrid").dataSource.data(data);
    //

    if (isReadOnly == true) {
        $("#" + gridId).find(".k-grid-delete").hide();
        $("#" + gridId).find(".k-grid-edit").hide();
        $("#" + gridId).find(".k-grid-add").hide();
    } else {
        $("#" + gridId).find(".k-grid-delete").show();
        $("#" + gridId).find(".k-grid-edit").show();
        $("#" + gridId).find(".k-grid-add").show();
    }

}

【讨论】：