Kendo UI не загружает данные при нажатии кнопки

Question

Пожалуйста, не помещайте его как дублирующее, так как есть другие вопросы о SO с аналогичной проблемой, и я пошел, хотя они и были.

Я пытаюсь загрузить сетку Kendo при нажатии кнопки, но, похоже, она не работает для меня. Я прилагаю мои файлы ниже:

KendoData.cshtml

<div id="grid"> 
     @(Html.Kendo().Grid(<MvcApplication1.Models.Customer) 
       .Name("AjaxGrid") 
       .AutoBind(false) 
      .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(20) 
        .Read(read => read.Action("KendoDataAjaxHandle", "Default1Controller")) 
     )   
       .Columns(columns => 
       { 
        //Create a column bound to the ProductID property. 
        columns.Bound(customer => customer.CustomerAltID); 
        //Create a column bound to the ProductName property. 
        columns.Bound(customer => customer.CustomerName); 
        //Create a column bound to the UnitsInStock property. 
        columns.Bound(customer => customer.Gender); 
       }) 
       .Pageable() //Enable the paging. 
       .Sortable() //Enable the sorting. 
       .Groupable() 
     ) 

    </div> 

    <style> 
     #AjaxGrid { 
      display: none; 
     } 
    </style> 

    <button class="btn btn-warning grid" type="button">Load Ajax KendoData</button> 

JQuery

$('button.grid').click(function() { 
     $("#AjaxGrid").data("kendoGrid").dataSource.read(); 
     $("#AjaxGrid").css("display", "block"); 
    }); 

Контроллер

public class Default1Controller : Controller 
    { 
     // 
     // GET: /Default1/ 

     private Sales_DW db= new Sales_DW(); 

     public ActionResult KendoData() 
     { 
      return View(); 
     } 

public ActionResult KendoDataAjaxHandle([DataSourceRequest]DataSourceRequest request) 
     { 
      IQueryable<Customer> products = db.Customers; 
      DataSourceResult result = products.ToDataSourceResult(request); 
      return Json(result, JsonRequestBehavior.AllowGet); 
     } 
} 

нажатием кнопки, я получаю ошибку Cannot read property dataSource of undefined на консоли. Может кто-то, пожалуйста, скажите мне, что я сделал неправильно здесь. Заранее спасибо.

Answer 1

В настоящее время вы используете подход Binding to local data при построении сетки.

Если вы хотите Bind with Remote Data, вам необходимо установить DataSource из сетки.

@(Html.Kendo().Grid<MvcApplication1.Models.Customer>() 
    //other details 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(20) 
     .Read(read => read.Action("ActionName", "ControllerName")) 
    ) 
) 

Answer 2

Пожалуйста, посмотрите на this

набор visibility:hidden;

Я have't протестировали код, его просто догадка.