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');
}

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

1 个答案: