Hide the Grid Loading Spinner
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | Created with the 2017.3.1026 version |
Description
How can I remove the loading spinner from the Kendo UI Grid?
Solution
- Use a jQuery selector to get the
div
with thek-loading-image
class. - Use the
hide
jQuery method.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
pageSize: 1000,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
requestStart: function(e) {
setTimeout(function(e) {
$(".k-loading-image").hide();
})
}
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
</script>
</div>