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







All Articles