Hide the Grid Loading Spinner

Environment

Product

Grid for Progress® Telerik® UI for ASP.NET Core

Description

How can I remove the loading spinner from the Kendo UI Grid?

Solution

1. Configure handler for the RequestStart event.
2. Use a jQuery selector to get the div with the k-loading-image class.
3. Use the hide jQuery method.

Example:

@(Html.Kendo().Grid<GridRemoveLoading.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(ev=>ev.RequestStart("onRequestStart"))
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
)

   function onRequestStart(e) {
        setTimeout(function (e) {
            $(".k-loading-image").hide();
        })
    }