Kendo UI无法在按钮点击时加载数据

时间:2016-12-20 10:48:11

标签: c# jquery kendo-ui kendo-grid kendo-ui-mvc

请不要将其标记为重复,因为在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错误。 有人可以告诉我这里我做错了什么。提前谢谢。

2 个答案:

答案 0 :(得分: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"))
     ) 
)

答案 1 :(得分:0)

请查看this

设置visibility:hidden;

我没有测试过代码,只是猜测。