How to force a refresh on a Kendo UI Grid filled with remote data?

Question

I have a Kendo UI Grid filled with info from a remote source and I want to force a refresh on the information displayed after a Kendo UI Window on my website is closed.

I tried this:

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

But it didn't work, this is how I create the Kendo UI 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 at the documentation but didn't come across a method to do this.

On a side note, I've been wondering how to display a loading animation on the Kendo UI Grid while the data is being loaded into it, it is shown after it's been loaded and I'm clicking through the pages of the grid, but when there's no data, it looks collapsed and I would like to display a loading animation to make it look filled while the info is being loaded.

Answer 1

As @NicholasButtler suggests, use ds.read() for forcing a read. Depending on your DataSource definition, the result might be cached. Check this on enabling/disabling transport.read.cache.

For replacing the loading image redefine the class .k-loading-image. Example:

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

EDIT In order to guarantee that you have space enough for displaying the image add the following style definition:

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

Fiddle example here : http://jsfiddle.net/OnaBai/nYYHk/1/

Answer 2

I had problems with the loading image not showing when loading remote data, but I noticed it was only on certain grids.

Turns out, if you configure the grid with: scrollable: false option, the loading image shows as expected. There's no need to have a min-height in the CSS and there's no need to have a scrollable grid if you're also paging.