kendo-ui - 如何用进度条替换 Kendo UI 网格加载图像

Question

我正在使用 asp.net mvc KENDO GRID 代码。我想在网格加载时隐藏加载图像，并将其替换为剑道进度条或其他图像。
那么该怎么办 ？我们需要显式添加 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>

Answer 1

当触发加载图像时，以下元素将呈现在 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>

您可以覆盖 k-loading-image 样式并将其 background-image 属性设置为您想要的任何其他内容:

.k-loading-image{
    background-image: url('someotherimage.gif');
}