Wait for Cancel event's default action to complete.

[Chris]

I am instantiating a custom command inside a grid.
If a certain condition is met, the command button (.k-grid-AddNewThing) is appended with the ("k-state-disabled") style class to disable the button.
This works great on load when wired up to the .DataBound event.

However, when the Edit button is clicked and subsequently the Cancel button is clicked, the ("k-state-disabled") style class is removed and reverted to the default.

I have tried to wire up the .Cancel event to re-apply the ("k-state-disabled") style class, but it seems that the .Cancel event is ansyncly firing the default action along with my custom function. 

There are two paths that i figure.

1. Client Template w/Conditional: this would be favorable, since i can remove the javascript function completely.
2. Somehow implement a callback/promise in the default .Cancel event.

I don't know if any of these are possible though.

Any ideas?

 

Grid Helper Event Method

.Events(e => { e.DataBound("disableCustomCommand"); e.Cancel("disableCustomCommand"); })

 

JS function:

    function disableCustomCommand(e) {
        var grid = this;
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
            if (model.isVerified == true) {
                $(this).find(".k-grid-AddNewThing").addClass("k-state-disabled").text("NewThing Exists");
            }
        });
    }
//This works perfectly on the .DataBound event, but does not process properly when called by the .Cancel event and reverts to default style class, giving the impression that the .find() method did not find the element or the .addClass() method did not apply the style.

 

 

[Angel Petrov]

Hello,

Since the button is placed inside the grid row I suggest using a template. That way you will achieve the desired result without implementing complex custom logic.

Regards,
Angel Petrov
Telerik by Progress

[Chris]

Hi Angel, thank you for your advice.

When it comes to the template for the Custom Command. How would i go about adding the template? The col.Command() method method does have the ClientTemplate available. There are the ClientFooter and Footer templates available.

[Chris]

Hi Angel,

Thank you for the reply. How would i go about implementing the client template on the Command column since there is no ClientTemplate method available on it.?

[Chris]

Hi, or should i just use the column.Template() method?

[Chris]

Hi Angel,

It looks like Dimiter Madjarov a solution: 

http://www.telerik.com/forums/how-do-i-conditional-set-the-visibility-of-the-command-edit-button-on-a-row-by-row-basis-#nRox-qoIm0iw2UYRe4-Oww 

but this relies on timers which i do not feel is the most stable solution to the problem

[Chris]

Solved:

columns.Template(x => { }).ClientTemplate("\\# if(data.SomeBoolValue)" + "{\\# <a class='k-button k-button-icontext k-state-disabled'>Thing Exists</a> \\#}" + "else {\\# <a class='k-button k-button-icontext'>Add Thing</a> \\# } \\#");