title: Conditionally hide button in cell of KendoUIGrid
body: <p>I have a Kendo UI Grid in which one column has a button, but I musgt hide the button depending on the row which the button is in (in this case first row and last row). </p>
  
  <p>How can I do that?</p>
  
  <p>My code is below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Kendo UI Snippet&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/&gt;
      &lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="grid"&gt;  
  &lt;/div&gt;
  
  &lt;script&gt;
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
          { width: 150, 
              command:            
                      [
                  {
                      name:"Up",
                      imageClass: "k-icon k-i-arrow-s",
                      click: function(e) {
                          var tr = $(e.target).closest("tr"); 
                          var item = this.dataItem(tr);
                          var dir = "U";
                          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                          moveItem.moveUp(dir,dataItem.order).addCallback(function(response){
                          alert(response);
                          })
                      }
                  },
            ]
              }
    ],
    dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
    ]
  });
  var grid = $("#grid").data("kendoGrid");
  grid.hideColumn(grid.columns[0].columns[0]);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>==================</p>
  
  <p>I have added the code that contains the moveItem.moveItemUp method. </p>
  
  <p>In this method I use a remote procedure call to execute some server side javascript. It doesn't have anything to do, really, with hiding of the buttons.    </p>
  
  <pre><code>&lt;xe:jsonRpcService
          id="jsonRpcService1"
          serviceName="moveItem"&gt;
          &lt;xe:this.methods&gt;
              &lt;xe:remoteMethod
                  name="moveUp"
                  script="return direction + order"&gt;
                  &lt;xe:this.arguments&gt;
                      &lt;xe:remoteMethodArg
                          name="direction"
                          type="string"&gt;
                      &lt;/xe:remoteMethodArg&gt;
                      &lt;xe:remoteMethodArg
                          name="order"
                          type="number"&gt;
                      &lt;/xe:remoteMethodArg&gt;
                  &lt;/xe:this.arguments&gt;
              &lt;/xe:remoteMethod&gt;
          &lt;/xe:this.methods&gt;
      &lt;/xe:jsonRpcService&gt;
  </code></pre>