title: Hide and show kendo ui grid column
body: <p>Is there any way to display and hide coloumn onEdit and Add mode. As display in the sample code. I want to display Unit Price on add and edit mode and hide in view mode. Please advise. But the following will shrink the grid. i want to make it still 100%. What event should i use if the user click cancel.</p>
  
  <pre><code>@model IEnumerable&lt;Kendo.Mvc.Examples.Models.ProductViewModel&gt;
  
  @(Html.Kendo().Grid(Model)    
      .Name("Grid")
      .Columns(columns =&gt;
      {
          columns.Bound(p =&gt; p.ProductID);
          columns.Bound(p =&gt; p.ProductName);
          columns.Bound(p =&gt; p.UnitPrice);
  
      })
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .Read(read =&gt; read.Action("Products_Read", "Grid"))
      )
       .Events(ev =&gt; ev.DataBound("onDataBound").Edit("onEdit"))
  )
  
  
  &lt;script type="text/javascript"&gt;
  
  function onEdit(e) {
  var grid = $('#Product').data('kendoGrid');
          if (!e.model.isNew()) {
              grid.showColumn(2);
          }
          else
          {
              grid.showColumn(2);
          }
  
  function onDataBound(e) {
      var grid = $('#Product').data('kendoGrid');
      grid.hideColumn(2);
  &lt;/script&gt;
  </code></pre>