Cách liên kết dữ liệu với lưới kendoui từ truy vấn ajax?

Question

Tôi có một datepicker và một lưới trên một trang. Tôi muốn lưới điện được điền dựa trên ngày trong datepicker. Tôi đã làm điều này với một mạng lưới mvc Telerik sử dụng grid.dataBind.

var grid = $('#Grid').data('tGrid'); 
var pDate = document.getElementById('DatePicker').value; 
$.ajax(
{ 
    type: 'POST', 
    url: '/Home/AccountSummary/', 
    dataType: 'json', 
    data: { date: pDate }, 
    success: function (result) { 
    grid.dataBind(result); 
    } 
}); 

Bây giờ tôi muốn làm tương tự ngoại trừ lưới Kendoui. Tôi biết tôi cần lấy lưới bằng cách sử dụng $('#Grid').data('kendoGrid'). Nhưng làm cách nào để kết buộc kết quả của tôi với lưới điện?

Answer 1

Giả sử biến kết quả chứa một mảng các đối tượng javascript và nó chứa dữ liệu cho cùng một số cột như đánh dấu ban đầu.

tức là. result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];

Hãy thử như sau:

$.ajax(
{ 
    type: 'POST', 
    url: '/Home/AccountSummary/', 
    dataType: 'json', 
    data: { date: pDate }, 
    success: function (result) { 
     $("#Grid").data("kendoGrid").dataSource.data(result); 
    } 
}); 

Answer 2

Bạn cũng có thể làm theo cách này:

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { 
      $.ajax({ 
       type: "POST", 
       url: "Controller/Handler", 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', 
       data: JSON.stringify({key: "value"}), 
       success: function(data) { 
        options.success(data); 
       } 
      }); 
     } 
    } 
}); 

Sau đó ràng buộc nó vào lưới:

var grid = $("#grid").kendoGrid({ 
    dataSource: dataSource 
} 

Bằng cách này bạn có thể thêm phần còn lại của các hành động CRUD để vận chuyển của bạn và bạn sẽ có tất cả mã của bạn ở một nơi.

Answer 3

Để mở rộng trên Igorrious ... Câu trả lời chính xác đó không giúp tôi nhưng nó dẫn tôi đến một câu trả lời.

gì làm việc cho tôi:

$.ajax(
    { 
    type: 'POST', 
    url: '/Controller/Action', 
    data: { 
     paramKey: paramValue 
    }, 
    success: function (result) { 
     $("#my-grid").data("tGrid").dataBind(result); 
    } 
}); 

Nếu điều này không giúp bạn, làm một số javascript gỡ lỗi để tìm hiểu lý do tại sao một số yếu tố trong chuỗi [$("#my-grid")] . [data("tGrid")] . [dataBind] có value == 'undefined'.

Answer 4

Bạn có thể liên kết kết quả Json với lưới. Và bạn cũng có thể vượt qua Mô hình nếu cần. Xem đoạn mã bên dưới chẳng hạn.

Xem here để biết thêm chi tiết.

$('#FindBtn').click(function (e) { 
    e.preventDefault(); 
    var UserDetails = 
    { 
     "FirstName": document.getElementById('FirstName').value, 
     "LastName": document.getElementById('LastName').value, 
    }; 
    $.ajax({ 
     url: "SearchJsonRequest", 
     type: 'POST', 
     contentType: "application/json;charset=utf-8", 
     data: JSON.stringify(UserDetails), 
     dataType: "json", 
     success: function (data) { 
      var grid = $('#AssociateSearch').getKendoGrid(); 
      grid.dataSource.data(data); 
      grid.refresh(); 
     } 
    }); 
    return false; 
});