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 · Accepted Answer · 2016-12-20 11:01:30Z

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, 2016 at 11:01

answered Dec 20, 2016 at 10:54

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aakash Thakur Over a year ago

Thanks Rajshekhar. Tried with this but still the same error.

Rajshekar Reddy Over a year ago

@AakashThakur I made a small update here .Grid<MvcApplication1.Models.Customer>() check with this syntax

Rajshekar Reddy Over a year ago

@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..

Aakash Thakur Over a year ago

Edited Rajshekhar.

R K Sharma · Accepted Answer · 2017-08-17 12:32:42Z

0

Please have look on this

set visibility:hidden;

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

answered Aug 17, 2017 at 12:32

R K Sharma

8759 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Kendo UI not loading data on button click

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related