Kendo UI not loading data on button click

Question

Please don't mark it as duplicate as there are other questions on SO with similar problem as well and I have gone though them.

I am trying to load Kendo grid on button click but it doesn't seem to be working for me. I am attaching my files below:

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");
    });

Controller

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);
        }
}

on the click of the button, I am getting Cannot read property dataSource of undefined error on console. Can someone please tell me as what I have done wrong here. Thanks in advance.

Answer 1

You are currently doing the Binding to local data approach while building the grid.

If you want to Bind with Remote Data you need to set the DataSource of the grid.

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

Answer 2

Please have look on this

set visibility:hidden;

I have't tested the code, its just a guess.