title: Adding validation to kendo grid destroy button
body: <p>My datasource grabs rows using a controller method (ASP MVC).  I need to set something up so the user can not delete all the rows from a grid, so when the delete button for the final row in the gris id clicked, it needs to realize it is the last, and just say no.  I have been trying to use the DataSource.Total() method and here is where I am at so far:</p>
  
  <pre><code>        $("#location-list").kendoGrid({
              dataSource: ds_locationsList,
              sortable: true,
              height: "150px",
              width: "300px",
              editable: "inline",
              columns: [{
                  field: "LocationName", title: "Trespassed Location(s)"
              }, {
                  command: [{
                      name: "destroy",
                      text: "Delete",
                      click: function(){
                          var rowCount = ds_locationsList.total();
  
                          if (rowCount &lt; 1) {
                              $("#dialog").dialog({
                                  modal: true,
                                  buttons: {
                                      Ok: function () {
                                          $(this).dialog("close");
                                      }
                                  }
                              });
                              return false;
                          }
                        }
                      }], 
                      width: "110px"
              }]
          });
  </code></pre>
  
  <p>This did not work, I'm thinking I need to get the rowCount from outside the destroy function, maybe in some kind of 'afterLoad'.  I have also tried doing it all outside, but in both cases nothing happens:</p>
  
  <pre><code>        $(".k-grid-delete").on("click", function () {
              var rowCount = ds_locationsList.total();
  
              if (rowCount &lt; 1) {
                  $("#loclistval").removeClass("hidden");
                  return false;
              }
          });
  </code></pre>
  
  <p>Has anyone had to do this? Any suggestions?  </p>
  
  <p>================================EDIT======================================</p>
  
  <p>As noted below, I have tried the custom delete function, but it only removing from the client side.  I tried debuggin, but the breakpoint I put in the delete function is never hit, so i must be messing up the call.  Here is my transport code:</p>
  
  <pre><code>        transport: {
                      read: {
                          url: '@Url.Action("JsonPopulateTrespassList", "TrespassOrder")/' + PersId,
                          dataType: 'json',
                          type: "POST"
                      },
                  destroy: {
                          url: '@Url.Action("JsonDeleteLocation", "TrespassOrder")',
                          dataType: 'json',
                          type: "POST"
                      }
          },
  </code></pre>
  
  <p>and my parameter map:</p>
  
  <pre><code>         parameterMap: function (options, operation) {
               if (operation == "destroy" &amp;&amp; options.models) {
                   var values = {};
                   values["TrespassLocId"] = options.models[0].TrespassLocId;
                   return values;
               }
           },
  </code></pre>
  
  <p>The custom delete:</p>
  
  <pre><code>function locDelete(e) {
      var len = this.dataSource.data().length;
  
      if (len === 1) {
          alert("There must be at least one location.");
      }
      else {
          this.removeRow($(e.target).closest("tr"));
      }
  }
  </code></pre>
  
  <p>and the grid code:</p>
  
  <pre><code>       $("#trespassed-location-list").kendoGrid({
              dataSource: ds_locationsList,
              sortable: true,
              height: "150px",
              width: "300px",
              editable: "incell",
              columns: [{
                  field: "LocationName", title: "Trespassed Location(s)"
              }, {
                  command: [{ name: "destroy", text: "Delete", click: locDelete }],
                  width: "110px",
              }] 
         });
  </code></pre>
  
  <p>So it removes the row from the client side, but not the server side.  But when I try to debug, the breakpoint on the locDelete function is never hit, so I'm sure what is going on.</p>