Question

如何使用Javascript重新加载或刷新Kendo Grid？

经常需要在某个时间或用户操作后重新加载或刷新网格。

Answer 1

您可以使用

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

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

Answer 2

我从不刷新。

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

一直对我有用。

Answer 3

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

Answer 4

在最近的一个项目中，我不得不根据一些调用来更新Kendo UI Grid，这些调用是在某些下拉选项上发生的。以下是我最终使用的内容：

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

希望这会为您节省一些时间。

Answer 5

如果您不想在处理程序中引用网格，可以使用以下代码：

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

如果有刷新按钮，这将刷新网格。可以像这样启用按钮：

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

Answer 6

实际上，它们是不同的：

$('#GridName').data('kendoGrid').dataSource.read()刷新表格行的uid属性
$('#GridName').data('kendoGrid').refresh()保留相同的uid

Answer 7

在我的情况下，我每次都有一个自定义网址;虽然结果的架构将保持不变我使用了以下内容：

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 8

你要做的只是添加一个事件 .Events（events =＆gt; events.Sync（＆＃34; KendoGridRefresh＆＃34;）） 在你的kendoGrid绑定代码中。不需要在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" })          
  )

您可以在任何.js文件中添加以下全局功能。因此，您可以为项目中的所有kendo网格调用它来刷新kendoGrid。

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

Answer 9

这些答案中没有一个得到var count = 0; var numTrue = 0; function onlyOne2(a, b, c) { var array = [a, b, c]; if(!!array[count] === true) { numTrue++; } if(count === array.length-1) { if(numTrue === 1) { return true; } else { return false; } }else { count++; return onlyOne2(a, b, c); } } console.log(onlyOne2(true, false, false));返回一个promise的事实，这意味着你可以在调用refresh之前等待数据加载。

read

如果你的数据抓取是即时/同步的，那么这是不必要的，但很可能它来自一个不会立即返回的端点。

Answer 10

我使用Jquery .ajax来获取数据。为了将数据重新加载到当前网格中，我需要执行以下操作：

{{1}}

Answer 11

通过使用以下代码，它自动调用网格的读取方法并再次填充网格

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

Answer 12

重新加载网格的另一种方法是

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

Answer 13

您可以使用以下行

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

对于自动刷新功能，请查看here

Answer 14

您始终可以使用$('#GridName').data('kendoGrid').dataSource.read();。在此之后你不需要.refresh();，.dataSource.read();会做到这一点。

现在，如果您想以更有棱角的方式刷新网格，可以执行以下操作：

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

vm.grid.dataSource.read();`

或

vm.gridOptions.dataSource.read();

并且不要忘记将您的数据源声明为kendo.data.DataSource类型

Answer 15

我想在刷新网格时返回第1页。即使新结果没有那么多页面，只需调用read（）函数就可以使您保持当前页面。在数据源上调用.page（1）将刷新数据源并返回到第1页，但在不可分页的网格上失败。该函数处理两个：

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 16

为了完成刷新，网格将与新的读取请求一起重新呈现，您可以执行以下操作：

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

财产可以是任何财产，例如排序

Answer 17

如果您希望在定时的基础上自动刷新网格，可以使用以下示例，其间隔设置为30秒：

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

Answer 18

您可以尝试：

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

Answer 19

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

Answer 20

小部件的默认/更新配置/数据设置为自动绑定到关联的DataSource。

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

Answer 21

只需写下代码

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

Answer 22

最简单的刷新方法是使用refresh（）函数。就像这样：

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

，同时您也可以使用以下命令刷新数据源：

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

后者实际上重新加载了网格的数据源。可以根据您的需要和要求使用两者。

Answer 23

您还可以通过向“读取操作”发送新参数并将页面设置为所需的内容来刷新网格：

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

在此示例中，网格的读取操作由2个参数值调用，并且在获得结果之后，对网格的分页在第1页中。

Answer 24

class Controller {
    public $model;

    public function __construct()  
    {  
        $this->model = new Model();

    } 

    public function invoke()
    {
            // show the requested products
            $products = $this->model->getList($_GET['type']);
            include 'view/viewlist.php';

    }
}

重新加载/刷新Kendo Grid

24 个答案: