Zaphod Zaphod - 1 month ago 5
Javascript Question

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

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

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