Recarregando / atualizando a grade do Kendo


171

Como recarregar ou atualizar uma grade do Kendo usando Javascript?

Geralmente, é necessário recarregar ou atualizar uma grade após algum tempo ou após uma ação do usuário.

Respostas:


314

Você pode usar

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

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

19
O @zespri readsolicitará o servidor e recarregará apenas a fonte de dados. Não haverá alterações na interface do usuário. refreshrenderiza novamente os itens na grade a partir da fonte de dados atual. É por isso que ambos são necessários.
Botis

37
Eu não acho que você precise da atualização na versão mais recente do Kendo. Como parece funcionar bem sem ele
GraemeMiller

2
sim! Este trabalho também com TreeList: $ ('# Gantt'). Data ('kendoTreeList'). DataSource.read (); $ ('# Gantt'). Data ('kendoTreeList'). Refresh ();
Hernaldo Gonzalez

27
Os desenvolvedores dizem explicitamente para não ligar para a atualização após a leitura: telerik.com/forums/show-progress-spinner-during-load-refresh, pois isso pode impedir a exibição do indicador de progresso.
Rustam Miftakhutdinov 16/03/2015

2
Estou usando uma versão mais recente e só preciso chamar .read. Chamar .refresh após a leitura causa duas viagens ao servidor para obter dados.
23716 Justin

59

Eu nunca atualizo.

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

sozinho trabalha para mim o tempo todo.


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

Obrigado, mas isso fornece o erro "TypeError: $ (...). Data (...) é indefinido". Também procurei em muitas páginas e tentei variações diferentes dessa solução, mas ainda assim recebo o mesmo erro. Qualquer ideia?
Jack

Se os dados ('kendoGrid') retornarem nulos, provavelmente o ID está errado ou você ainda não criou a grade. NB você faz a grade com $ (..) kendoGrid () e acessá-lo mais tarde com $ () de dados ( 'kendoGrid')..
tony

29

Em um projeto recente, tive que atualizar a grade da interface do usuário do Kendo com base em algumas chamadas, que estavam acontecendo em algumas seleções suspensas. Aqui está o que eu acabei 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 isso poupe algum tempo.


exatamente o que eu estava procurando grid.setDataSource (dataSource); para chamadas não remotas, é o que você deve usar. Obrigado!
Rui Lima

15

Nenhuma dessas respostas obtém o fato de readretornar uma promessa, o que significa que você pode aguardar o carregamento dos dados antes de chamar a atualização.

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

Isso é desnecessário se a captura de dados for instantânea / síncrona, mas é mais provável que seja proveniente de um ponto de extremidade que não retornará imediatamente.


1
Aproveitar o suporte interno da promessa é realmente conveniente e também removeu algumas linhas de código. Eu apostaria que essa deveria ser a resposta verdadeira.
FoxDeploy

1
Obrigado Zachary! Passei algumas horas nesse problema - sua solução é a única que funcionou para mim. Estou inserindo linhas na fonte do banco de dados da grade via ajax, em loop (uma linha de cada vez). Depois que o loop termina, dataSource.read () funcionava apenas algumas vezes. "então" é o que eu precisava. Muito apreciado!
Antony D

9

Se você não deseja ter uma referência à grade no manipulador, pode usar este código:

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

Isso atualizará a grade, se houver um botão de atualização. O botão pode ser ativado da seguinte forma:

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

9

Na verdade, eles são diferentes:

  • $('#GridName').data('kendoGrid').dataSource.read()atualiza os uidatributos da linha da tabela

  • $('#GridName').data('kendoGrid').refresh() deixa o mesmo uid


8

O que você precisa fazer é adicionar um evento .Events (events => events.Sync ("KendoGridRefresh")) no código de ligação do kendoGrid. Não é necessário gravar o código de atualização no resultado do 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" })          
  )

E você pode adicionar a seguinte função Global em qualquer arquivo .js. portanto, você pode chamá-lo para todas as grades do kendo no seu projeto para atualizar o kendoGrid.

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

Atualize o kendoGrid apenas adicionando Evento.
Milan

8

No meu caso, eu tinha um URL personalizado para acessar cada vez; embora o esquema do resultado permaneça o mesmo.
Eu usei o seguinte:

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

5

Você pode usar as linhas abaixo

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

Para um recurso de atualização automática, dê uma olhada aqui


5

Ao usar o código a seguir, ele automaticamente chamou o método de leitura da grade e preenche novamente a grade

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

5

Uma maneira alternativa de recarregar a grade é

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

5

Você sempre pode usar $('#GridName').data('kendoGrid').dataSource.read();. Você realmente não precisa .refresh();depois disso,.dataSource.read(); fará o truque.

Agora, se você deseja atualizar sua grade de uma maneira mais angular, você pode:

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

OU

vm.gridOptions.dataSource.read();

E não se esqueça de declarar sua fonte de dados como kendo.data.DataSourcetipo


5

Eu usei o Jquery .ajax para obter dados. Para recarregar os dados na grade atual, preciso fazer o seguinte:

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

4

Quero voltar à página 1 quando atualizar a grade. Apenas chamar a função read () manterá você na página atual, mesmo se os novos resultados não tiverem muitas páginas. Chamar .page (1) na fonte de dados atualizará a fonte de dados E retornará à página 1, mas falhará nas grades que não são pagináveis. Esta função lida com 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();
     }
}

4

Para fazer uma atualização completa, onde a grade será renderizada novamente junto com a nova solicitação de leitura, você pode fazer o seguinte:

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

Onde propriedade pode ser qualquer propriedade, por exemplo, classificável


3

Basta escrever o código abaixo

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

1
Isso seria verdadeiro apenas se você inicializou a grade com um pageable.refresh = true ... que não é por padrão. De qualquer forma, você não deve usar uma solução alternativa UI quando você é capaz de fazê-lo usando uma função de API (ver resposta aceite)
The_Black_Smurf


3

Você pode tentar:

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

3

Se você deseja que a grade seja atualizada automaticamente em uma base cronometrada, você pode usar o exemplo a seguir, com o intervalo definido em 30 segundos:

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

2

A configuração / dados padrão / atualizados dos widgets é configurada para se ligar automaticamente a um DataSource associado.

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

Houve algo errado com a resposta aceita (a partir de 2013), já que sua resposta é muito semelhante. Você deve pelo menos comentar isso de alguma forma - e os comentários nessa resposta dizem até que você não deve ligarrefresh
James Z

2

Você também pode atualizar sua grade enviando novos parâmetros para a ação Ler e configurando as páginas como desejar:

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

Neste exemplo, a ação de leitura da grade está sendo chamada pelo valor de 2 parâmetros e após obter o resultado, a paginação da grade fica na página 1.


1

A maneira mais fácil de atualizar é usar a função refresh (). Qual é o seguinte:

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

enquanto você também pode atualizar a fonte de dados usando este comando:

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

Na verdade, este último recarrega a fonte de dados da grade. O uso de ambos pode ser feito de acordo com sua necessidade e exigência.


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

Embora isso seja pelo menos uma pasta de cópia 1 a 1, ela não fornece informações adicionais. Quase todas as respostas neste post com mais de uma votação recomendada são recomendadas. #dataSource.read()
Fabian N.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.