剑道网格隐藏/显示删除按钮 [英] Kendo Grid Hiding/Showing Delete button

问题描述

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

I am new on Kendo MVC components as well as on jQuery.

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

I am building Kendo Grid.I would like to hide destroy(delete) command on page load on Kendo grid.After that when I click to button on same page, it should be visible.

剑道格:

@(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 是在创建剑道网格之前加载的.当我在编辑按钮的点击功能中使用它时，它隐藏了删除按钮.

changed some parts according to first answer.Now $(".k-grid-delete", "#grid").hide(); cannot hide k.grid-delete class. I guess JavaScript is loaded before kendo grid created. When I use it inside click function of edit button it hides delete buttons.

推荐答案

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

If you use the same id for each columns you have many elements with the same id which is not legal. Try using the CSS class attribute that identifies a delete button and on creation (page load) hide it and then on click show it.

隐藏它们的代码

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

显示它们的代码

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

JSFiddle 示例:http://jsfiddle.net/OnaBai/pSgeD/

JSFiddle example here: http://jsfiddle.net/OnaBai/pSgeD/

这篇关于剑道网格隐藏/显示删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！