Как связать сетку Kendo с динамическим datatable

Question

Я работаю с Kendo + бритвой, и я хочу создать сетку Kendo, у которой нет конкретной модели данных (в моем случае я должен показать результаты SQL запрос, введенный пользователем, поэтому результат может иметь любое количество/тип столбцов). Чтобы сделать его общим, я попытался связать сетку с System.data.DataTable и ajax-вызовом для заполнения этой сетки. Он отлично работает при загрузке в первый раз, но когда я повторяю ту же сетку, она не обновляет имена столбцов.

Сценарий:
Вызов Ajax производится нажатием кнопки, чтобы заполнить сетку результатами запроса. При первом вызове ajax результатом был JSON с атрибутами id, name и description. Сетка показала правильные данные с 3 вышеупомянутыми столбцами и 4 строками.
На втором вызове ajax ответ JSON содержит атрибуты UserName, UserType, Address, PhoneNumber, на этот раз сетка не обновляет привязку модели и столбцы остаются предыдущими тремя столбцами id, name и description, но количество строк обновляется без данных в нем (поскольку столбцы отсутствуют в возвращенном JSON)

Я хочу переустановить столбцы к возвращаемым атрибутам JSON, которые могут различаться каждый раз.

Вот мой HTML код:

@model System.Data.DataTable 
<div> 
@(Html.Kendo().Grid(Model) 
.Name("ResultsGrid") 
.TableHtmlAttributes(new { Class = "kendoGrid" }) 
) 
</div> 

и Javascript на кнопку кода мыши:

function execute() { 
$.ajax({ 
url: "something something", 
type: "GET", 
contentType: "application/json;charset=utf-8", 
data: "", 
dataType: "json", 
success: function (data) { 
     $("#ResultsGrid").kendoGrid({ 
       scrollable: false, 
       pageable: true, 
       sortable: true, 
       resizable: true, 
       dataSource: { 
         data: data, 
         pageSize: 5 
        } 
       }); 
} 
} 

Как я могу обновить сетку для привязки к столбцам в новые атрибуты JSON?

Answer 1

Сначала нужно уничтожить старую сетку, а затем создать новый:

success: function(data) { 
    // get reference to the grid instance 
    var grid = $("#ResultsGrid").data("kendoGrid"); 
    // destroy it 
    grid.destroy(); 
    $("#ResultsGrid") 
     .empty() // clear the old HTML 
     .kendoGrid({ 
      dataSource: { 
       data: data, 
       pageSize: 5 
      } 
     }); 

} 

Answer 2

success: function(data) { 
// get reference to the grid instance 
var grid = $("#ResultsGrid").data("kendoGrid"); 
// destroy it 
grid.destroy(); 
$("#ResultsGrid") 
    .empty() // clear the old HTML 
    .kendoGrid({ 
     dataSource: { 
      data: data, 
      pageSize: 5 
     } 
    }); 

}