如何在數據加載到kendo mvc ui網格之前顯示加載圖像？

我正在使用asp.net mvc 3.我試圖使用kendo mvc ui網格顯示記錄列表。我已經設置了可編輯模式來彈出，所以處理可以在服務器上完成。我想顯示加載圖像數據被加載到頁面中，這意味着前柵格，提神等我已經使用了網格狀如何在數據加載到kendo mvc ui網格之前顯示加載圖像？

@(Html.Kendo().Grid(Model) 
    .Name("GrdXXX") 
    .HtmlAttributes(new { style="width:1000px;" }) 
    .Columns(columns => 
    { 
     columns.Bound(p => p.xxx).Width(50); 
     columns.Bound(p => p.yyy).Width(50); 
     columns.Bound(p => p.zzz).Width(80); 
     columns.Bound(p => p.State).Width(50); 
     columns.Bound(p => p.Phone).Width(70); 
     columns.Command(command => { command.Edit().Text("Edit Details"); command.Destroy().HtmlAttributes(new { onclick = "return DeleteConfirm();" }); }).Width(120); 
    }) 
    .ToolBar(toolbar => toolbar.Create().Text("Add New Zip Code")) 
    .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(m => m.Title("Edit Zipcode").Draggable().Resizable())) 
      .Pageable() 
      .Sortable() 
      .Scrollable() 
    .DataSource(dataSource => dataSource 
     .Server() 
     .Model(model => model.Id(p => p.RecNo)) 
       .Update("Update", "ghj") 
       .Create("Create", "ghj") 
       .Destroy("Delete", "ghj") 
    ) 
)

我一直在使用jQuery的AJAX調用嘗試，但它不爲我工作。所以請指導我。

來源

2012-09-28 Karthik Bammidi

如果配置了ajax綁定，網格會自動顯示加載圖像。您的網格配置爲依賴於常規HTTP GET請求的服務器綁定（無Ajax）。一旦瀏覽器開始發出HTTP GET請求，加載圖像就會立即被刪除。

來源

2012-09-28 07:06:22

我需要顯示彈出窗口來編輯記錄或添加新記錄。所以我應該使用server（）方法。是否有任何方法可以在分頁，加載等時顯式加載效果。 –

不。我想我在回覆中說過。 –

這就是我通過擴展jQuery明確地向Kendo網格添加加載效果的方法。它使用原生的Kendo造型。

$.extend($.fn, { 
     busy: function (c) { 
      b = $(this); 
      var d = b.find(".k-loading-mask"); 
      c ? d.length || (d = $("<div class='k-loading-mask'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'/><div class='k-loading-color'/></div>").width(b.outerWidth()).height(b.outerHeight()).prependTo(b)) : d && d.remove() 
     }   
    });

，然後用它作爲

$("#grid").busy(true); // change to false to hide loading effect

來源

2012-12-12 16:50:34

更好的解決方案所推薦的Telerik的：

// show loading indicator 
kendo.ui.progress($element, true); 

// hide loading indicator 
kendo.ui.progress($element, false); 

// $element is a jQuery object. The element must have a position:relative style applied

參考。 http://www.telerik.com/forums/how-to-manually-show-and-hide-loading-or-spinning-image#Y_apWF417kKpicdUz0NUHg

來源

2015-03-18 18:36:47 user1477388

如何在數據加載到kendo mvc ui網格之前顯示加載圖像？

回答

相關問題