Hide / Show Delete Button Kendo Grid

Question

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

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

kendo mesh:

@(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;

});

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

Answer 1

id , id, . CSS, delete ( ) , .

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

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

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

Answer 2

- . " offlide", .

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();
    }

}