How to disable a grid button after successful post

[Scott]

I have an ajax post method where the user will sign up for an open slot. After the slot gets assigned, I want to disable the button and change the text. Can anyone tell me what I'm doing wrong here. I'm coming from Web Forms to MVC so it's been a little learning curve.

 

here's my grid

@(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.JobStartDateTime).Visible(false);
                    columns.Bound(p => p.JobInfo).Title("Job");
                    columns.Bound(p => p.JobTimes).Title("Times");
                    columns.Bound(p => p.JobPayDisplay).Title("Pay");
                    columns.Command(cmd => cmd.Custom("Details").Click("Details"));
                    columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp"));


                })
                .Pageable()
                .Scrollable(scr => scr.Height(500))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .ServerOperation(false)
                        )
                )

and then here's the javascript function

 

function SignUp(e) {
        var id = $(e.currentTarget).closest("tr").find('td:first').html();
        $.ajax({
            type: 'POST',
            url: '/Jobs/SignUp',
            data: {id : id},
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
            success: function (result) {
                alert(result);
                $(this).find(".k-grid-SignUp").addClass("k-state-disabled");
                $(this).find(".k-grid-SignUp").text("Awarded");
            },
            error: function () {
                alert('Failed  ' + result);
                
            }
        })
    }

[Petar]

Hi, Scott.

Here is a REPL example demonstrating how the targeted functionality can be implemented. The example uses this method to disable the clicked custom command button:

function SignUp(e) {
    $(e.currentTarget).addClass("k-disabled");
    $(e.currentTarget).text("Awarded");
}

Using the suggested approach, you can execute similar code when the Ajax request in your scenario is successful.

I hope the above details will help you achieve what you need. 

Regards,
Petar
Progress Telerik

[Scott]

Thank you sir

[Petar]

You are welcome, Scott! I am happy to hear the suggested approach has helped you.