CODEWITHSUNDEEP
jquerykendo-uikendo-gridkendo-asp.net-mvc
BattlFrog
BattlFrog

Reputation: 3397

Kendo Grid - Manual delete function is ignored

I am trying to add some validation to a delete button my grid, so I am having the delete button execute a function when clicked, but it seems to be ignoring the function. Here is the function:

function locDelete(e) {
    var len = this.dataSource.data().length;
    var item = $("#trespassed-location-list").data("kendoGrid").dataItem($(this).closest("tr"));

    if (len === 1) {
        alert("There must be at least one location.");
    }
    else {
        alert("This is in the else");
        //this.remove(item);
        //this.removeRow($(e.target).closest("tr"));
    }
}

I put the second alert in there for testing, neither alert is ever hit. Here is the grid code, and the datasource:

 var PersId = $("#PersonId").val();
 var ds_locationsList = new kendo.data.DataSource({
        transport: {
                    read: {
                        url: '@Url.Action("JsonPopulateTrespassList", "TrespassOrder")/' + PersId,
                        dataType: 'json',
                        type: "POST"
                    },
                destroy: {
                        url: '@Url.Action("JsonDeleteLocation", "TrespassOrder")',
                        dataType: 'json',
                        type: "POST"
                    }
        },
         parameterMap: function (options, operation) {
             if (operation == "destroy" && options.models) {
                 var values = {};
                 values["TrespassLocId"] = options.models[0].TrespassLocId;
                 return values;
             }
         },
         schema: {
            model: {
                id: "TrespassedLocId",
                fields: {
                    TrespassLocId: { editable: false},
                    LocationName: { editable: false }
                }
            }
        },
         pageSize: 20
 });


    $(document).ready(function () {

       $("#trespassed-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: locDelete }],
                width: "110px",
            }] 
       });

If I comment out the LocDelete function, I get a 'locDelete undefined' error, so I know the grid is looking for it. Could the delete confirmation notice be messing things up? But with the locDelete function as written above (with the remove code commented out, the row still gets removed from the database base and client side. I have tried tracking it with firebug, but my breakpoints never get hit for the locDelete function.

Upvotes: 0

Views: 593

Answers (1)

OnaBai
OnaBai

Reputation: 40917

The problem is that while initializing the grid JavaScript uses locDelete and if not defined it complains (JavaScript itself) but then, by the end of Kendo UI Grid initialization, it defines a handler for some specific classes those corresponding to the default commands. If instead of defining the name as destroy you set it to my_destroy, it will work.

Upvotes: 2

Related Questions