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
- Configure handler for the RequestStart event.
- Use a jQuery selector to get the div with the k-loading-image class.
- 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();
})
}