如何用進度條替換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-裝載圖像風格，並設置其背景 - image property to any other thing you want：

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