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.

Rajshekar Reddy · Answer 1 · 2016-12-20T11:01:30.140

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

edited Dec 20 '16 at 11:01

answered Dec 20 '16 at 10:54

Rajshekar Reddy

18,647
3
40
59

Thanks Rajshekhar. Tried with this but still the same error. – Aakash Thakur Dec 20 '16 at 10:58
@AakashThakur I made a small update here `.Grid()` check with this syntax – Rajshekar Reddy Dec 20 '16 at 11:01
@AakashThakur if you have follwed the code I am sure the above mentioned error will not occur.. Can you update your question with the new changes you tried.. – Rajshekar Reddy Dec 20 '16 at 11:09
Edited Rajshekhar. – Aakash Thakur Dec 20 '16 at 11:12

score 0 · Answer 2 · answered Aug 17 '17 at 12:32

0

Please have look on this

set visibility:hidden;

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

answered Aug 17 '17 at 12:32

R K Sharma

845
8
23
42

Kendo UI not loading data on button click

2 Answers2