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

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

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

剑道网格：

@(Html.Kendo().Grid() .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网格之前加载的。 当我在编辑按钮的单击function里面使用它时，它会隐藏删除按钮。

Answer 1

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

隐藏它们的代码

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

显示它们的代码

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

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

Answer 2

要更改kendo-grid设置，您必须重新创建网格。 如果你绑定到远程数据，你可以注释掉“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(); } }