How to display spinner when data are rendered from ajax in kendo grid

Question

I have some search filters for a query in my application. From the filters I want to render the json results into a kendo grid. For that reason I don't use the default DataSource.Read() of the grid but an Ajax request and I bind the results to the grid like that:

Kendo grid:

@(Html.Kendo().Grid<List<SearchSpecialtiesResult>>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Hidden();
        columns.Bound(c => c.Code).Width(100);
        // Some other columns
    })
     //Some events and filtering options
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            // other model values
        })
        )
)

Set the dataSource on Ajax success

var datasource = new kendo.data.DataSource({ data: resultData });
$("#grid").data("kendoGrid").setDataSource(datasource);

The binding happens correctly however to other places that I use the DataSource.Read() the grid shows a loading effect that I can't find how to reproduce to my page and I use to this place some other loading effect we use on Ajax requests. Is there any way to reproduce it in my case?

Answer 1

I had such cases in my application too. The way I handled them was also by kendo.ui.progress($("#gridDame"), true). For the sake of the completion of the answer I will post the way I handled them and the way I am handling them now with the DataSource.Read() of the grid by passing the filter input values as additional data to my Read request.

First way:

I had a general Ajax call for all my gridRequests

function getGridData(uri, payload, gridName) {
    return $.ajax({
        url: uri,
        type: "POST",
        contentType: "application/json",
        data: payload,
        beforeSend: function () {
            window.kendo.ui.progress($("#"+ gridName), true);
        }
    }).done(function (result) {
        return result;
    }).always(function () {
        window.kendo.ui.progress($("#" + gridName), false);
    });
}

I called it on my button click with the parameters of my search form

    $("#searchFormBtn").bind("click", function (e) {
        e.preventDefault();

        // ... Get the filter input values and strignify them as json ...

        return getGridData(url, filterInputValuesStrignifiedAsJson, "grid")
            .done(function (result) {
                if (result.success) {
                    var datasource = new kendo.data.DataSource({ data: result.data });
                    $("#grid").data("kendoGrid").setDataSource(datasource);
                } else {
                    //Handle error
                }
            });
    });

Second way:

I set my Datasource.Read() like this:

.Read(read => read.Action("ActionName", "ControllerName").Data("getFilterInputValues"))

and always Autobind(false) in order not to read on first load

In the function getFilterInputValues I get my search form values like that:

function searchModelData() {
    return {
        DateFrom: $("#DateFrom").data("kendoDatePicker").value(),
        DateTo: $("#DateTo").data("kendoDatePicker").value(),
        Forever: document.getElementById("datesForever").checked === true ? true : false,
        SearchCommunicationType: { Id: $("#SearchCommunicationType_Id").val() },
        SearchBranch: { Id: $("#SearchBranch_Id").val() },
        CompletedById: { Id: $("#CompletedById_Id").val() },
        SearchOperationType: { Id: $("#SearchOperationType_Id").val() },
        AcademicPeriodSearch: { Id: $("#AcademicPeriodSearch_Id").val() },
        AcademicYearSearch: $("#AcademicYearSearch").val(),
        Name: $("#Name").val(),
        ContactValue: $("#ContactValue").val(),
        AddressValue: $("#AddressValue").val()
    };
}

Finally I trigger the DataSource.Read() of my grid on the button click

    $("#searchFormBtn").bind("click", function () {
        var grid = $('#grid').data("kendoGrid");

        if (grid.dataSource.page() !== 1) {
            grid.dataSource.page(1);
        }
        grid.dataSource.read();
    });

With Datasource.Read() obviously works correctly and the spinning effect you mention in your question.