Kendo UI Grid在初始读取时未显示微调器/加载图标 [英] Kendo UI Grid Not showing spinner / load icon on initial read

问题描述

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

I've set up my kendo ui grid to read data from an MVC action that returns JSON. I'm using the free version of Kendo and not the MVC specific, due to cost.

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

The issue is that when the page loads and does the initial population of the grid it doesn't show the loading spinner. After grid is populated and I go to another page or sort a column it shows up.

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

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参数吗?或在不设置高度的情况下使微调器正常工作的任何方式.

Does anyone know why you have to set the height parameter? Or any way of getting the spinner to work without setting the height.

我的剑道javascript kode:

My kendo 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>'
            }
        ],
    });

推荐答案

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

The solution var to use a variable to tell me if the dataset load was the initial one or not. It's not a perfect solution, but it's the only one I've been able to make work.

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"
        },
    });

这篇关于Kendo UI Grid在初始读取时未显示微调器/加载图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！