Recarga / actualización de Kendo Grid

¿Cómo recargar o actualizar un Kendo Grid usando Javascript?

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

Puedes usar

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Nunca me refresco.

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

solo funciona para mí todo el tiempo.

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

En un proyecto reciente, tuve que actualizar Kendo UI Grid 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);
    });

Esperemos que esto te ahorre algo de tiempo.

Ninguna de estas respuestas obtiene el hecho de que readdevuelve una promesa, lo que significa que puede esperar a que se carguen los datos antes de llamar a actualizar.

$('#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 lo más probable es que provenga de un punto final que no regrese de inmediato.

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))

En realidad, son diferentes:

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

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

Lo que tiene que hacer es 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 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 para todas las cuadrículas de kendo en su proyecto para actualizar el kendoGrid.

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

En mi caso, tenía una URL personalizada a la que ir cada vez; 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);
    });

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 aquí

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

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

Una forma alternativa de recargar la red es

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

Siempre puedes usar $('#GridName').data('kendoGrid').dataSource.read();. Realmente no es necesario .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 olvide declarar su fuente de datos como kendo.data.DataSourcetipo

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);
})

Quiero volver a la página 1 cuando actualice la cuadrícula. 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 .page (1) en el origen de datos actualizará el origen de datos Y volverá a la página 1, pero falla en las cuadrículas que no son paginables. 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();
     }
}

Para realizar una actualización completa, donde la cuadrícula se volverá a representar 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

Solo escribe debajo del código

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

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

Puedes probar:

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

Si desea que la cuadrícula se actualice automáticamente en forma cronometrada, 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>

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

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

También puede actualizar su grilla enviando nuevos parámetros a la acción Leer y configurando las páginas a su gusto:

var ds = $("#gridName").data("kendoGrid").dataSource;
ds.options.page = 1;
var parameters = {
    id: 1
    name: 'test'
}
ds.read(parameters);

En este ejemplo, la acción de lectura de la cuadrícula se llama mediante el valor de 2 parámetros y después de obtener el resultado, la paginación de la cuadrícula se encuentra en la página 1.

La forma más fácil de actualizar es usar la función refresh (). Que dice así:

$('#gridName').data('kendoGrid').refresh();

aunque también puede actualizar la fuente de datos con este comando:

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

Este último vuelve a cargar la fuente de datos de la cuadrícula. El uso de ambos se puede hacer de acuerdo a sus necesidades y requerimientos.

$("#grd").data("kendoGrid").dataSource.read();