Geek Answers Handbook

How do I force a Kendo UI grid filled with deleted data?

I have a Kendo interface grid filled with information from a remote source, and I want to force the information displayed after the Kendo user interface window on my website is closed.

I tried this:

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

But that didn't work, here's how I create the Kendo interface grid:

 var ds = new kendo.data.DataSource({ transport: { read: { url: root_url + "/usuario/index", dataType: "json" } }, schema: { data: "Response", total: "Count" }, serverPaging: false, pageSize: 2 }); $("#usuariosGrid").kendoGrid({ pageable: { refresh: true }, columns: [ { field: "UsuarioId", title: "ID", width: "100px" }, { field: "Nombre", title: "Nombre", width: "100px" }, { field: "ApellidoP", title: "Apellido Paterno", width: "100px" }, { field: "ApellidoM", title: "Apellido Materno", width: "100px" }, { command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" } ], dataSource: ds });

I looked through the documentation but did not find a method for this.

On the other hand, I was wondering how to display the loading animation in the Kendo UI grid, while the data is being loaded into it, it is displayed after it is loaded, and I look at the grid pages, but when there is no data, it looks minimized, and I would like to display loading animation so that it looks filled during the loading of information.

+7
source share
2 answers

As @NicholasButtler suggests, use ds.read() to force read. Depending on your definition of a DataSource result may be cached. Check this for enable / disable transport.read.cache .

Override the .k-loading-image class to replace the uploaded .k-loading-image . Example:

 .k-loading-image { background-image:url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif') }

EDIT To ensure that you have enough space to display the image, add the following style definition:

 #grid .k-grid-content { min-height: 100px; }

Sample script: http://jsfiddle.net/OnaBai/nYYHk/1/

+7
source

I had problems with a boot image that does not appear when loading deleted data, but I noticed that it was only on certain grids.

It turns off if you configure the grid using the scrollable: false option, the boot image will display as expected. There is no need to have min-height in CSS, and there is no need to have a scrollable grid if you are also viewing pages.

+1
source

More articles:


All Articles