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
- Configure handler for the
RequestStartevent. - Use a jQuery selector to get the div with the
k-loading-imageclass. - Use the
hidejQuery 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();
})
}