我对Kendo MVC组件和jQuery都很陌生。
我正在构建一个Kendo网格。我希望在页面加载时隐藏网格中的删除命令。然后,当我点击页面上的按钮时,它应该可见。
Kendo网格:
@(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>
编辑:根据第一条回答更改了一些内容。现在 $(“#grid”)中的$(“.k-grid-delete”).hide()
无法隐藏 k.grid-delete 类。我猜测 JavaScript 在 kendo 网格创建之前已经加载。当我将其用于编辑按钮的单击功能时,它会隐藏删除按钮。
$(".k-grid-delete", "#grid").hide()
,而不仅仅是在$(document).ready(function (){ });
中执行,因为 Grid 也会在ready
事件中创建。你需要确保这个操作在 Grid 初始化之后执行。另一种可能性是在dataBinding
事件中执行。 - OnaBai