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>'
}
],
});
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>'
}
],
});
- Quick question, Is the css position of the loader element set to relative? – dcodesmith Commented Jan 14, 2014 at 14:50
- I have not set any css position. So it is whatever kendo ui sets it to. – Zaphod Commented Jan 14, 2014 at 15:02
3 Answers
Reset to default 44I 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;
}
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"
},
});
Chances are, because you are creating and setting the datasource in the grid's initialization, the grid loads so fast that you don't see a load spinner. If you look at all the web demos for kendogrid on their website, you rarely see the initial load spinner. On large remote datasources that take longer to load, you would see it.
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)
It's not that it only shows one row. It's because it failed to read it your height property value so it defaulted to as small as possible. Height takes in a numeric pixel value and does not accept percentages. It couldn't read your value, so it probably took longer to initialize the grid, which allowed you to see the load spinner. Instead, height should be set like height: 400, for example. But this is besides the point.
If you really want the user to see a load spinner on start, try loading the datasource outside of the grid initialization. Basically, load the grid first, and load the datasource after so that there is slightly more delay between the grid rendering and datasource setting.
$("#grid").kendoGrid({
//kendoGrid details... but exclude dataSource
});
var ds = new kendo.data.DataSource({
//DataSource details...
});
And then set the datasource like this:
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(ds);
grid.refresh();
However, I think this would still load pretty fast.
Another last resort if you still really want the spinner is to trick the user into thinking it's taking longer to load and manually call the load spinner like you've tried. Call kendo.ui.progress($("#loading"), true);, execute a small delay function for say 250ms and then turn the load spinner off, and then call grid.setDataSource(ds); and refresh.