jQuery 剑道网格隐藏/显示删除按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19911238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo Grid Hiding/Showing Delete button
提问by balron
I am new on Kendo MVC components as well as on jQuery.
我是 Kendo MVC 组件以及 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.
我正在构建剑道网格。我想在剑道网格上的页面加载时隐藏销毁（删除）命令。之后，当我单击同一页面上的按钮时，它应该是可见的。
kendo grid:
剑道网格：
@(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:
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;
});
Edit: 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.
编辑：根据第一个答案更改了一些部分。现在 $(".k-grid-delete", "#grid").hide(); 无法隐藏 k.grid-delete 类。我猜 JavaScript 是在创建剑道网格之前加载的。当我在编辑按钮的点击功能中使用它时，它会隐藏删除按钮。
回答by OnaBai
If you use the same idfor each columns you have many elements with the same idwhich is not legal. Try using the CSS class attribute that identifies a deletebutton and on creation (page load) hide it and then on click show it.
如果你id对每一列使用相同的元素，你就会有许多相同的元素，id这是不合法的。尝试使用标识delete按钮的 CSS 类属性，并在创建（页面加载）时隐藏它，然后单击显示它。
Code for hiding them
隐藏它们的代码
$(".k-grid-delete", "#grid").hide();
Code for showing them back
显示它们的代码
$('#EnableEdit').click(function () {
$(".k-grid-delete", "#grid").show();
});
JSFiddle example here: http://jsfiddle.net/OnaBai/pSgeD/
这里的 JSFiddle 示例：http: //jsfiddle.net/OnaBai/pSgeD/
回答by Ramazan ?ztürk
For change kendo-grid setting, you must re-create your grid. You can comment out "for offlide data", if you gird binding to remote 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();
}
}
