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