Question

I have a simple Telerik Grid for ASP.NET MVC with Ajax delete command. The deleting works, however, the page displays an error, and doesn’t update.

I would also like to call custom JavaScript upon AJAX call return, but can’t figure out where to put the code.

Here’s the view:

Html.Telerik()
    .Grid<ScenarioVm>(Model)
    .Name("scenarioGrid")
    .DataBinding(dataBinding => dataBinding
        .Ajax()
        .Delete("Delete", "Scenario")
        .Select("Index", "Scenario"))
    .DataKeys(keys => keys.Add(c => c.Id))
    .Columns(columns =>
    {
        columns.Template(o => o.Name)
            .Title("Scenario")
            .FooterTemplate(@<text>Total @Model.Count()</text>);
        columns.Bound(o => o.IsLocked);
        columns.Bound(o => o.ContractMonth);
        columns.Bound(o => o.CreateDate);
        columns.Command(commands => commands
                .Delete()
                .ButtonType(GridButtonType.Image))
            .Title("Delete");
    })
    .Sortable()
    .Scrollable(scroll => scroll.Height(200))
    .ClientEvents(events => events.OnDelete("onDelete")))

The Javascript that gets called before the AJAX call:

function onDelete(e) {
    var scenario = e.dataItem;
    if (scenario.CanDelete == false) {
        alert("Can not delete " +
            e.dataItem.Name +
            ": there exists a solution!");
        return false;
    } else {
        $.blockUI({
            css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }
        });
        return true;
    }
}

Controller method:

[HttpPost]
[GridAction]
public ActionResult Delete(Scenario scenario)
{
    Logger.Info("Delete scenario " + scenario);
    if (scenario == null)
    {
        return new EmptyResult();
    }

    try
    {
        _scenarioRepository.Delete(scenario);
        Logger.Info("Successfully deleted " + scenario);
    }
    catch(Exception e)
    {
        Logger.Error(scenario + e.Message, e);
        var result = new JsonResult
        {
            JsonRequestBehavior = JsonRequestBehavior.DenyGet,
            Data = new {
                ErrorCode = 1,
                ErrorMessage = e.GetType() + ": " + e.Message
            }
        };

        return result;
    }

    return new EmptyResult();
}

Answer 1

If I understood the question correctly you want to javascript function to be executed when operation is done. Last row in the example source code is to define callback for OnComplete event.

.ClientEvents(events => events
            .OnLoad("onLoad")
            .OnEdit("onEdit")
            .OnDetailViewCollapse("onDetailViewCollapse")
            .OnDetailViewExpand("onDetailViewExpand")
            .OnDelete("onDelete")
            .OnSave("onSave")
            .OnDataBinding("onDataBinding")
            .OnRowDataBound("onRowDataBound")
            .OnRowSelect("onRowSelect")
            .OnDataBound("onDataBound")
            .OnColumnResize("onColumnResize")
            .OnColumnReorder("onColumnReorder")
            .OnComplete("onComplete"))

Telerik documentation has also an example how to define OnComplete event.