javascript - Kendo UI Grid 在初始读取时未显示微调器/加载图标

Question

我已经设置了我的 kendo ui 网格以从返回 JSON 的 MVC 操作中读取数据。由于成本原因，我使用的是 Kendo 的免费版本，而不是特定于 MVC 的版本。

问题是当页面加载并完成网格的初始填充时，它不显示加载微调器。填充网格后，我转到另一个页面或对它显示的列进行排序。

如果我设置网格的高度参数，我会得到初始微调器，但网格只显示一行(应该显示 20 行)。

有谁知道为什么要设置高度参数？或者在不设置高度的情况下让微调器工作的任何方式。

我的剑道 javascript 代码:

$("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: url,
                parameterMap: function (options) {
                    var result = {
                        pageSize: options.pageSize,
                        skip: options.skip,
                        take: options.take,
                        page: options.page,
                    };

                    if (options.sort) {
                        for (var i = 0; i < options.sort.length; i++) {
                            result["sort[" + i + "].field"] = options.sort[i].field;
                            result["sort[" + i + "].dir"] = options.sort[i].dir;
                        }
                    }

                    return result;
                }
            },
            requestStart: function () {
                //kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
            },
            requestEnd: function () {
                //kendo.ui.progress($("#loading"), false);

            },
            pageSize: 20,
            serverPaging: true,
            serverSorting: true,
            schema: {
                total: "total", 
                data: "data"
            },
        }),
        height: "100%", <-- I want to avoid this as it renders the grid way to small
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "PaymentRefId",
                title: "Id"
            },
            {
                field: "DueDate",
                title: "Due Date"
            },
            {
                field: "Credit",
                title: "Amount"
            },
            {
                field: "InvoiceGroupId",
                title: " ",
                sortable: false,
                template: '<a href="/InvoiceGroup/InvoiceGroupDetails2/#: InvoiceGroupId #">See details</a>'
            }
        ],
    });

Answer 1

我遇到了同样的问题。它实际上是在渲染微调器/进度条，但是因为网格内容区域最初没有高度，所以您看不到它。这对我有用。试一试:

// This forces the grids to have just al little height before the initial data is loaded. 
// Without this the loading progress bar / spinner won't be shown.
.k-grid-content {
    min-height: 200px;
}