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

Question

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

我正在构建Kendo Grid.我想在Kendo网格上的页面加载时隐藏destroy(删除)命令.之后当我点击同一页面上的按钮时,它应该是可见的.

剑道网格:

@(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:

$(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;

});

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

Answer 1

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

隐藏它们的代码

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

显示它们的代码

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

JSFiddle 示例在这里：http://jsfiddle.net/OnaBai/pSgeD/