검도 그리드 재 장전 / 갱신

Javascript를 사용하여 Kendo Grid를 다시로드하거나 새로 고치는 방법은 무엇입니까?

언젠가 또는 사용자 조치 후 그리드를 다시로드하거나 새로 고쳐야하는 경우가 종종 있습니다.

당신이 사용할 수있는

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

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

나는 결코 상쾌하지 않습니다.

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

홀로 항상 나를 위해 일합니다.

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

최근 프로젝트에서 일부 드롭 다운 선택에서 발생하는 일부 호출을 기반으로 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);
    });

잘하면 이것은 당신에게 시간을 절약 할 것입니다.

이러한 답변 중 하나만이 read약속 을 반환 한다는 사실을 얻지 못하므로 새로 고침을 호출하기 전에 데이터가로드 될 때까지 기다릴 수 있습니다.

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

데이터 수집이 인스턴트 / 동기화 인 경우에는 필요하지 않지만 즉시 리턴되지 않는 엔드 포인트에서 발생하는 것보다 더 많습니다.

핸들러에서 그리드에 대한 참조를 원하지 않으면이 코드를 사용할 수 있습니다.

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

새로 고침 버튼이 있으면 그리드를 새로 고칩니다. 버튼은 다음과 같이 활성화 할 수 있습니다.

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

실제로는 다릅니다.

• $('#GridName').data('kendoGrid').dataSource.read()uid테이블 행 의 속성을 새로 고칩니다.

• $('#GridName').data('kendoGrid').refresh() 같은 uid를 떠난다

해야 할 일은 kendoGrid 바인딩 코드에 이벤트 .Events (events => events.Sync ( "KendoGridRefresh")) 를 추가하는 것입니다 .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 파일에 다음과 같은 전역 함수를 추가 할 수 있습니다. 따라서 프로젝트의 모든 검도 그리드에 대해 호출하여 kendoGrid를 새로 고칠 수 있습니다.

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

내 경우에는 매번 갈 사용자 정의 URL이 있었다. 결과의 스키마는 동일하게 유지됩니다.
나는 다음을 사용했다.

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

아래 줄을 사용할 수 있습니다

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

자동 새로 고침 기능은 여기를 참조하십시오

다음 코드를 사용하여 그리드의 읽기 메소드를 자동으로 호출하고 그리드를 다시 채 웁니다.

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

그리드를 다시로드하는 다른 방법은

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

당신은 항상 사용할 수 있습니다 $('#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유형 으로 선언하는 것을 잊지 마십시오

Jquery .ajax를 사용하여 데이터를 얻었습니다. 데이터를 현재 그리드로 다시로드하려면 다음을 수행해야합니다.

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

그리드를 새로 고칠 때 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();
     }
}

그리드를 새로운 읽기 요청과 함께 다시 렌더링하는 완전한 새로 고침을 수행하려면 다음을 수행하십시오.

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

속성은 임의의 속성이 될 수 있습니다 (예 : 정렬 가능)

아래 코드를 작성하십시오

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

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

시도해 볼 수 있습니다 :

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

그리드가 시간 단위로 자동 새로 고쳐 지길 원하는 경우 간격이 30 초로 설정된 다음 예를 사용할 수 있습니다.

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

위젯의 기본 / 업데이트 된 구성 / 데이터는 연관된 데이터 소스에 자동으로 바인딩되도록 설정됩니다.

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

읽기 작업에 새 매개 변수를 보내고 원하는 페이지를 설정하여 그리드를 새로 고칠 수도 있습니다.

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

이 예제에서 그리드의 읽기 작업은 2 개의 매개 변수 값으로 호출되며 결과를 얻은 후 그리드의 페이징은 1 페이지에 있습니다.

새로 고침하는 가장 쉬운 방법은 refresh () 함수를 사용하는 것입니다. 다음과 같습니다.

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

이 명령을 사용하여 데이터 소스를 새로 고칠 수도 있습니다.

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

후자는 실제로 그리드의 데이터 소스를 다시로드합니다. 필요와 요구 사항에 따라 두 가지를 모두 사용할 수 있습니다.

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