[Solved] How to make the spinner spin?

[Frank Michael]

I have this

Html.Telerik().Grid<RenderSprint>()
        // .BindTo(Model)
        .Name("SprintGrid")
        .Localizable("de-DE") //ToDo Culture allgemein ersetzen
        .ToolBar(tb => {
            tb.Insert();
            tb.Custom().Action<SprintController>(sc => sc.AjaxAggregate())
                    .Text("Aggregate")
                    .HtmlAttributes(new {id="custom-action-aggregate"});
        })
        .DataBinding(b => b.Ajax()
            .Select<SprintController>(sc => sc.AjaxGridSelect())
            .Delete<SprintController>(sc => sc.AjaxGridDelete(String.Empty)) // Parameter is added by Grid engine
            .Insert<SprintController>(sc => sc.AjaxGridInsert())
            .Update<SprintController>(sc => sc.AjaxGridUpdate(String.Empty))) // Parameter is added by Grid engine
        .DataKeys(k => k.Add(s => s.RowKey))
        .Columns(c =>
        {
            c.Command(s =>
            {
                s.Select(); // .HtmlAttributes(new {style = "width: 80%; height: 80%" });
                s.Edit();  // .HtmlAttributes(new { style = "width: 80%; height: 80%" });
                s.Delete(); //.HtmlAttributes(new { style = "width: 80%; height: 80%" });
            }).Width(300);
            c.Bound(s => s.Title);
            c.Bound(s => s.RemainingDays).Format("{0}").ReadOnly(true).Width(15).Title("Rem. Days");
            c.Bound(s => s.RemainingHours).Format("{0}").ReadOnly(true).Width(15).Title("Rem. Hours");
            c.Bound(s => s.Date).Format("{0:d}");
        })
        .Sortable()
        .Pageable()
        .Render();

and this:

$("#custom-action-aggregate").live('click', function (e) {
        e.preventDefault();
        var grid = $("#SprintGrid").data("tGrid");
        var target = e.target.href;
        $.ajax({
            url: target,
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            dataType: 'json',
            error: function (xhr, status) {
                alert(status);
            },
            success: function (result) {
                var grid = $("#SprintGrid").data("tGrid");
                grid.ajaxRequest();
            }
        });

This works. However between the Ajax Request and the success response I would like to make the grid spinner spin, so that the user knows, that something is still going on. The controller action typically takes about 30 seconds.

[Georgi Krustev]

Hi Frank Michael ,

You can try with the following code snippet:

$("#custom-action-aggregate").live('click', function (e) {
        e.preventDefault();
        var grid = $("#SprintGrid").data("tGrid");
        grid.showBusy();
        var target = e.target.href;
        $.ajax({
            url: target,
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            dataType: 'json',
            error: function (xhr, status) {
                alert(status);
            },
            complete:$.proxy(grid.hideBusy, grid),
            success: function (result) {
                var grid = $("#SprintGrid").data("tGrid");
                grid.ajaxRequest();
            }
        });

Best wishes,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.