title: Kendo Grid Hiding/Showing Delete button
body: <p>I am new to Kendo MVC components as well as to jQuery.</p>
  <p>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.</p>
  <p>Kendo grid:</p>
  <pre><code>@(Html.Kendo().Grid&lt;Model&gt;() 
      .Name(&quot;grid&quot;)
      .Columns(columns =&gt;
      {
          columns.Bound(product =&gt; product.DESCRIPTION).Title(&quot;Description&quot;);
          columns.Bound(product =&gt; product.CODE).Title(&quot;Description&quot;);
          columns.Command(commands =&gt;
          {
              commands.Destroy().HtmlAttributes(new { id = &quot;buttondelete&quot; }); 
          }).Title(&quot;Operations&quot;);
      })
      .ToolBar(toolbar =&gt;
      {
          toolbar.Create().Text(&quot;Add Records&quot;); 
          toolbar.Save(); 
      })
                                   
      .Editable(editable =&gt; editable.Mode(GridEditMode.InCell)) 
      .Pageable(pager =&gt; pager
          .PageSizes(true)
          .Input(true)
          .Refresh(true)
      )
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .ServerOperation(true)
          .Events(events =&gt; events.Error(&quot;onError&quot;))
          .Model(model =&gt;
          {
              model.Id(product =&gt; product.ID); // Specify the property which is the unique identifier of the model
              model.Field(p =&gt; p.DESCRIPTION).Editable(false);
              model.Field(product =&gt; product.CODE).Editable(false);
          })
          .Create(create =&gt; create.Action(&quot;a&quot;, &quot;www&quot;)) 
          .Read(read =&gt; read.Action(&quot;b&quot;, &quot;www&quot;))  
          .Update(update =&gt; update.Action(&quot;c&quot;, &quot;www&quot;))  
          .Destroy(destroy =&gt; destroy.Action(&quot;d&quot;, &quot;www&quot;)) 
      )
  )
  </code></pre>
  <p>JS:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  
      $(document).ready(function () {
          //$(&quot;#grid&quot;).find(&quot;.k-grid-delete&quot;).hide() // hide delete button
          $(&quot;#grid&quot;).find(&quot;.k-toolbar&quot;).hide(); // hide toolbar
          $(&quot;.k-grid-delete&quot;, &quot;#grid&quot;).hide();
      });
      
      $('#EnableEdit').click(function () {
          $(&quot;#grid&quot;).find(&quot;.k-toolbar&quot;).show();
          
          // $(&quot;.k-grid-delete&quot;, &quot;#grid&quot;).show();
          var grid = $(&quot;#grid&quot;).data(&quot;kendoGrid&quot;);
          grid.dataSource.at(0).fields[&quot;CODE&quot;].editable = true;
          grid.dataSource.at(0).fields[&quot;DESCRIPTION&quot;].editable = true;
      });
  
  &lt;/script&gt;
  </code></pre>
  <p>Edit: changed some parts according to first answer. Now
  <code>$(&quot;.k-grid-delete&quot;, &quot;#grid&quot;).hide();</code> 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.</p>