Hiding the Grid Loading Spinner

Environment

Product

Telerik UI for ASP.NET Core Grid

Description

How can I remove the loading spinner from the Telerik UI for ASP.NET Core 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();
        })
    }

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base