Kendo Grid Cancel event restores hidden buttons

Question

I have a Kendo grid with row buttons that I hide depending on users accessing the page: for certain users, only "Edit" button will be visible, while for others "Delete" and "Add" buttons will be visible. I do this with a function that, after checking user and their permissions, hides the buttons like this:

            $("#grid").find(".k-grid-delete").hide();
            $("#grid").find(".k-grid-edit").show();
            $("#grid").find(".k-grid-add").hide();

This is working fine, but if a user with only the Edit button visible clicks on Edit and then clicks the Cancel button, the grid restores itself to "normal" and all the buttons are visible. I've tried intercepting the "Cancel" event, and call the function that hids the buttons there, but the redraw of the grid apparently happens AFTER the cancel event is finished. I've tried with databound, but the databound is not raised when the action is cancelled. I need to intercept an event that happens after "Cancel" is clicked and before the grid is redrawn.

Any ideas?

Answer 1

In the end it was simpler to build the toolbar and command options with a function than to remove conditionally certain buttons after building the grid. That is, in the kendo grid definition function:

var grid = $("#grid").kendoGrid({
                        dataSource: dataSource,
                        toolbar: setToolbarCreateButton(),
                        columns: [
                            { field: "COL1" },
                            { field: "COL2" },
                            { field: "COL3" },
                            {
                                command: setCommandRow(),
                                title: " ",
                                width: "250px"
                            }
                        ],
                        (rest of configuration here)
                    });

And in the functions setCommandRow() and setToolbarCreateButton() return the definition of the buttons depending on the conditions:

        // Returns an array of objects with the buttons for the command bar IF those buttons are visible
    function setToolbarCreateButton() {
        if (checkEditable(false)) return [{ name: "create" }];
        else return null;
    }

and

        // Returns an array of objects with the buttons for the row IF those buttons are visible
    function setCommandRow() {
        var cmdRow = [];
        if (checkEditable(true)) cmdRow.push({ name: "edit" });
        if (checkEditable(false)) cmdRow.push({name: "destroy" });
        return cmdRow;
    }

checkEditable() is, of course, the method that determines if the edit or destroy buttons are available or not. In this way instead of making the buttons visible or invisible I create the buttons or not depending on the conditions.