Question

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

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

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

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

我的剑道javascript kode：

$("#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;
}

Answer 2

解决方案var使用变量来告诉我数据集加载是否是初始加载。这不是一个完美的解决方案，但它是我唯一能够开展工作的解决方案。

var initialLoad = true;
$("#grid").kendoGrid({
    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>'
        }
    ],
});
var ds = 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 () {
            if (initialLoad) <-- if it's the initial load, manually start the spinner
                kendo.ui.progress($("#invoiceGroupGrid"), true);
        },
        requestEnd: function () {
            if(initialLoad)
                kendo.ui.progress($("#invoiceGroupGrid"), false);
            initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)

        },
        pageSize: 20,
        serverPaging: true,
        serverSorting: true,
        schema: {
            total: "total", 
            data: "data"
        },
    });

Answer 3

有可能，因为您正在网格的初始化中创建和设置数据源，所以网格加载速度非常快，以至于您看不到加载微调器。如果你在他们的网站上查看kendogrid的所有网络演示，你很少看到初始加载微调器。在需要更长时间加载的大型远程数据源上，您会看到它。

If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20)

并不是它只显示一行。这是因为它未能读取您的height属性值，因此它默认为尽可能小。 Height接受数字像素值，不接受百分比。它无法读取您的值，因此初始化网格可能需要更长时间，这样您就可以看到加载微调器。相反，高度应该设置为height: 400,，例如。但这不是重点。

如果您真的希望用户在启动时看到加载微调器，请尝试在网格初始化之外加载数据源。基本上，首先加载网格，然后加载数据源，以便在网格渲染和数据源设置之间稍微延迟。

$("#grid").kendoGrid({ //kendoGrid details... but exclude dataSource }); var ds = new kendo.data.DataSource({ //DataSource details... });

然后像这样设置数据源：

var grid = $("#grid").data("kendoGrid"); grid.setDataSource(ds); grid.refresh();

但是，我认为这仍然会加载很快。

如果你仍然真的想要微调器的另一个最后的手段是欺骗用户认为它需要更长的时间加载并手动调用加载微调器就像你尝试过的那样。调用kendo.ui.progress($("#loading"), true);，执行一个小延迟函数，比如250ms，然后关闭加载微调器，然后调用grid.setDataSource(ds);并刷新。

Kendo UI Grid初始读取时不显示微调/加载图标

3 个答案: