CODEWITHSUNDEEP
c#jquerykendo-uikendo-gridkendo-ui-mvc
Aakash Thakur
Aakash Thakur

Reputation: 3895

Kendo UI not loading data on button click

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.

Upvotes: 1

Views: 856

Answers (2)

R K Sharma
R K Sharma

Reputation: 855

Please have look on this

set visibility:hidden;

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

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

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

Upvotes: 1

Related Questions