How to replace Kendo UI grid loading image with progress bar
I am using asp.net mvc code KENDO GRID. I want to hide the loading image when the grid is loading and replace it with a kendo progress bar or another image.
So what to do? we need to explicitly add CSS
<div class="OutStandingDetailsGridArea">
@(Html.Kendo().Grid(Model)
.Name("OutStandingDetailsGrid")
.Columns(column =>
{
column.Bound(x => x.ConsolidatedInvoiceDispatchID).Hidden(true);
column.Bound(x => x.ConsolidatedInvoiceNumber).Hidden(true);
column.Bound(x => x.PaidAmount)
.ClientTemplate("#if(data.PaidAmount<0) {# " +
"<span style='color:red' class='OustandingPdAmt'> #=kendo.toString(data.PaidAmount, 'n2')# </span>" +
"#}" +
"else if(data.PaidAmount>0) {# " +
"<span> #=kendo.toString(data.PaidAmount, 'n2')# </span>" +
"#}#")
.ClientFooterTemplate("<div style='text-align: right' >#= kendo.toString(sum, 'n2') #</div>")
.HtmlAttributes(new { style = "text-align:right" })
//.Sortable(false)
.Filterable(false);
.HtmlAttributes(new { style = "height: 320px;" })
//.Pageable()
//.Sortable()
//.Filterable()
.Scrollable(x=>x.Height(285))
//.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.Amount).Sum();
aggregates.Add(p => p.PaidAmount).Sum();
aggregates.Add(p => p.BalanceAmount).Sum();
}
)
//.Read("OutstandingDetailsAgg_Read", "CreditControl")
.ServerOperation(false)
)
)
</div>
+3
source to share
1 answer
When the boot image runs, the following elements are displayed in the DOM
<div class="k-loading-mask" style="width:100%;height:100%"><span class="k-loading-text">Loading...</span><div class="k-loading-image"><div class="k-loading-color"></div></div></div>
You can override the k-load-image style and set its background-image property to whatever other thing you want:
.k-loading-image{
background-image: url('someotherimage.gif');
}
+4
source to share