kendo ui - template - Recargar/actualizar Kendo Grid

kendo ui grid toolbar button template

Question

¿Cómo volver a cargar o actualizar una Kendo Grid usando Javascript?

A menudo se requiere volver a cargar o actualizar una cuadrícula después de algún tiempo o después de una acción del usuario.

Answer 1

Al usar el siguiente código, llamó automáticamente al método de lectura de la grilla y nuevamente llenó la grilla

$(''#GridName'').data(''kendoGrid'').dataSource.read();

Answer 2

En mi caso, tenía una url personalizada para cada momento; aunque el esquema del resultado seguiría siendo el mismo.
Usé lo siguiente:

var searchResults = null;
$.ajax({
url: http://myhost/context/resource,
dataType: "json",
success: function (result, textStatus, jqXHR) {
//massage results and store in searchResults
searchResults = massageData(result);
}
}).done(function() {
//Kendo grid stuff
var dataSource = new kendo.data.DataSource({ data: searchResults });
var grid = $(''#doc-list-grid'').data(''kendoGrid'');
dataSource.read();
grid.setDataSource(dataSource);
});

Answer 3

En realidad, son diferentes:

• $(''#GridName'').data(''kendoGrid'').dataSource.read() actualiza los atributos de uid de la fila de la tabla

• $(''#GridName'').data(''kendoGrid'').refresh() deja el mismo uid

Answer 4

En un proyecto reciente, tuve que actualizar la grilla UI de Kendo en función de algunas llamadas, que estaban sucediendo en algunas selecciones desplegables. Esto es lo que terminé usando:

$.ajax({
url: ''/api/....'',
data: { myIDSArray: javascriptArrayOfIDs },
traditional: true,
success: function(result) {
searchResults = result;
}
}).done(function() {
var dataSource = new kendo.data.DataSource({ data: searchResults });
var grid = $(''#myKendoGrid'').data("kendoGrid");
dataSource.read();
grid.setDataSource(dataSource);
});

Espero que esto te ahorre algo de tiempo.

Answer 5

La configuración / datos predeterminados / actualizados de los widgets está configurado para vincularse automáticamente a un DataSource asociado.

$(''#GridId'').data(''kendoGrid'').dataSource.read();
$(''#GridId'').data(''kendoGrid'').refresh();

Answer 6

Lo que tiene que hacer es simplemente agregar un evento .Events (events => events.Sync ("KendoGridRefresh")) en su código de enlace kendoGrid. No es necesario escribir el código de actualización en el resultado de ajax.

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(m => m.Id))
.Events(events => events.Sync("KendoGridRefresh"))
)
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden();
columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);
}).Events(e => e.DataBound("onRowBound"))
.ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))
.Sortable()
.HtmlAttributes(new { style = "height:260px" })
)

Y puede agregar la siguiente función global en cualquiera de sus archivos .js. por lo tanto, puede llamarlo a todas las cuadrículas de kendo en su proyecto para actualizar KendoGrid.

function KendoGridRefresh() {
var grid = $(''#document'').data(''kendoGrid'');
grid.dataSource.read();
}

Answer 7

Ni una sola de estas respuestas obtiene el hecho de que la read devuelve una promesa, lo que significa que puede esperar a que se carguen los datos antes de llamar a la actualización.

$(''#GridId'').data(''kendoGrid'').dataSource.read().then(function() {
$(''#GridId'').data(''kendoGrid'').refresh();
});

Esto es innecesario si su captura de datos es instantánea / síncrona, pero es más probable que provenga de un punto final que no regrese inmediatamente.

Answer 8

Nunca renuevo

$(''#GridName'').data(''kendoGrid'').dataSource.read();

solo funciona para mí todo el tiempo.

Answer 9

Para hacer una actualización completa, donde la cuadrícula se volverá a procesar junto con la nueva solicitud de lectura, puede hacer lo siguiente:

 Grid.setOptions({
property: true/false
});

Donde la propiedad puede ser cualquier propiedad, por ejemplo, ordenable

Answer 10

Puede intentar:

 $(''#GridName'').data(''kendoGrid'').dataSource.read();
$(''#GridName'').data(''kendoGrid'').refresh();

Answer 11

Puedes usar

$(''#GridName'').data(''kendoGrid'').dataSource.read();
$(''#GridName'').data(''kendoGrid'').refresh();

Answer 12

Puedes usar las siguientes líneas

$(''#GridName'').data(''kendoGrid'').dataSource.read();
$(''#GridName'').data(''kendoGrid'').refresh();

Para una función de actualización automática, eche un vistazo here

Answer 13

Quiero volver a la página 1 cuando actualizo la grilla. Simplemente llamando a la función read () lo mantendrá en la página actual, incluso si los nuevos resultados no tienen tantas páginas. Llamar a .página (1) en la fuente de datos actualizará la fuente de datos Y volverá a la página 1, pero falla en las cuadrículas que no se pueden escribir. Esta función maneja ambos:

function refreshGrid(selector) {
var grid = $(selector);
if (grid.length === 0)
return;
grid = grid.data(''kendoGrid'');
if (grid.getOptions().pageable) {
grid.dataSource.page(1);
}
else {
grid.dataSource.read();
}
}

Answer 14

Si desea que la cuadrícula se actualice automáticamente en un tiempo determinado, puede usar el siguiente ejemplo, que tiene el intervalo establecido en 30 segundos:

 <script type="text/javascript" language="javascript">
$(document).ready(function () {
setInterval(function () {
var grid = $("#GridName").data("kendoGrid");
grid.dataSource.read();
}, 30000);
});
</script>

Answer 15

Si no desea tener una referencia a la cuadrícula en el controlador, puede usar este código:

 $(".k-pager-refresh").trigger(''click'');

Esto actualizará la cuadrícula, si hay un botón de actualización. El botón se puede habilitar así:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

Answer 16

Siempre puede usar $(''#GridName'').data(''kendoGrid'').dataSource.read(); . Realmente no necesitas .refresh(); después de eso, .dataSource.read(); hará el truco

Ahora, si desea actualizar su cuadrícula de una manera más angular, puede hacer:

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>
vm.grid.dataSource.read();`

O

vm.gridOptions.dataSource.read();

Y no se olvide de declarar su kendo.data.DataSource datos como tipo kendo.data.DataSource

Answer 17

Simplemente escriba el código debajo

$(''.k-i-refresh'').click();

Answer 18

Una forma alternativa de volver a cargar la red es

$("#GridName").getKendoGrid().dataSource.read();

Answer 19

Usé Jquery .ajax para obtener datos. Para volver a cargar los datos en la cuadrícula actual, necesito hacer lo siguiente:

.success (function (result){
$("#grid").data("kendoGrid").dataSource.data(result.data);
})

Answer 20

$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);

Answer 21

$(''#GridName'').data(''kendoGrid'').dataSource.read();
$(''#GridName'').data(''kendoGrid'').refresh();