กำลังโหลด / รีเฟรช Kendo Grid

จะโหลดหรือรีเฟรช Kendo Grid โดยใช้ Javascript ได้อย่างไร?

มันมักจะต้องโหลดใหม่หรือรีเฟรชกริดหลังจากบางครั้งหรือหลังจากการกระทำของผู้ใช้

คุณสามารถใช้ได้

$('#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 เดียวกัน

สิ่งที่คุณต้องทำคือเพิ่มกิจกรรมกิจกรรม (events => events.Sync ("KendoGridRefresh")) ในรหัสการผูก 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" })          
  )

และคุณสามารถเพิ่มฟังก์ชัน Global ต่อไปนี้ในไฟล์. 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

วิธีที่ง่ายที่สุดในการรีเฟรชคือการใช้ฟังก์ชั่นรีเฟรช () ซึ่งไปเช่น:

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

ในขณะที่คุณสามารถรีเฟรชแหล่งข้อมูลโดยใช้คำสั่งนี้:

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

หลังจริงโหลดแหล่งข้อมูลของกริด การใช้ทั้งสองสามารถทำได้ตามความต้องการและความต้องการของคุณ

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