I am new to Kendo MVC components as well as to jQuery.
I am building a Kendo grid. I would like to hide the destroy (delete) command in the grid on page load. After that, when I click a button on the 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:
<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>
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 the kendo grid is created. When I use it inside the click function of the edit button, it hides the delete buttons.