如何在数据加载到 kendo mvc ui 网格之前显示加载图像？答案

【问题标题】：How to display loading image before data loading into kendo mvc ui grid?如何在数据加载到 kendo mvc ui 网格之前显示加载图像？
【发布时间】：2012-09-28 06:43:43
【问题描述】：

我正在研究 asp.net mvc 3。我正在尝试使用 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")
    )
)

我尝试过使用 ajax jquery 调用，但它对我不起作用。所以请指导我。

【问题讨论】：

标签： c# asp.net-mvc kendo-ui

【解决方案1】：

这就是我如何通过扩展 jQuery 来显式地向 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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果配置了 ajax 绑定，网格将自动显示加载图像。您的网格配置为依赖于常规 HTTP GET 请求（无 Ajax）的服务器绑定。一旦浏览器开始发出 HTTP GET 请求，加载图像将立即被删除。

【讨论】：

我需要显示弹出窗口来编辑记录或添加新记录。所以我应该使用 server() 方法。有没有办法在分页、加载等过程中显式放置加载效果。
没有。我想我在回复中说过。