Kendo UI Grid Not showing spinner / load icon on initial read

Question

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.

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).

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

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

Answer 1

I had this same issue. It actually is rendering the spinner / progress bar, but because the grid content area initially has no height, you can't see it. This worked for me. Give it a shot:

// 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;
}