如何用进度条替换 Kendo UI 网格加载图像答案

【问题标题】：how to replace Kendo UI grid loading image with progress bar如何用进度条替换 Kendo UI 网格加载图像
【发布时间】：2015-03-06 02:38:25
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： kendo-ui telerik kendo-grid kendo-asp.net-mvc

【解决方案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');
}

【讨论】：