Adding validation to kendo grid destroy button - asp.net-mvc-3

Question

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:
$("#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 < 1) {
$("#dialog").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
return false;
}
}
}],
width: "110px"
}]
});
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:
$(".k-grid-delete").on("click", function () {
var rowCount = ds_locationsList.total();
if (rowCount < 1) {
$("#loclistval").removeClass("hidden");
return false;
}
});
Has anyone had to do this? Any suggestions?
================================EDIT======================================
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:
transport: {
read: {
url: '#Url.Action("JsonPopulateTrespassList", "TrespassOrder")/' + PersId,
dataType: 'json',
type: "POST"
},
destroy: {
url: '#Url.Action("JsonDeleteLocation", "TrespassOrder")',
dataType: 'json',
type: "POST"
}
},
and my parameter map:
parameterMap: function (options, operation) {
if (operation == "destroy" && options.models) {
var values = {};
values["TrespassLocId"] = options.models[0].TrespassLocId;
return values;
}
},
The custom delete:
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"));
}
}
and the grid 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",
}]
});
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.

Answer 1

The problem is that the remove event is triggered while the row is being deleted and too late for stopping it.
So, the easiest way is defining a custom command that does the validation.
Define Grid commands as:
columns : [
{
command: [
...,
{ name: "Remove", click: obDelete }
],
...
},
...
]
and then define obDelete as:
function obDelete(e) {
var len = this.dataSource.data().length;
if (len === 1) {
alert("last");
} else {
this.removeRow($(e.target).closest("tr"));
}
}
Running example here: http://jsfiddle.net/OnaBai/bxxqC/