Wait for Cancel event's default action to complete.

7 posts, 2 answers
  1. Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 28 Nov 2016 Link to this post

    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.

     

     

  2. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 30 Nov 2016 Link to this post

    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
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 30 Nov 2016 in reply to Angel Petrov Link to this post

    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.

  4. Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 30 Nov 2016 in reply to Angel Petrov Link to this post

    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.?

  5. Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 30 Nov 2016 Link to this post

    Hi, or should i just use the column.Template() method?
  6. Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 30 Nov 2016 in reply to Angel Petrov Link to this post

    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

  7. Answer
    Chris
    Chris avatar
    26 posts
    Member since:
    Mar 2016

    Posted 30 Nov 2016 in reply to Angel Petrov Link to this post

    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> \\# } \\#");
Back to Top