[Solved] Kendo UI grid won't populate from ajax dataSource MVC

[Prash]

Hi there i am trying to populate kendo grid using Ajax but it's not populating. I Google ' d and tried some options but didn't work.

Here is my controller code. 

I am fetching employees list from database using EF and Repository pattern. 

Note: it works if I don't use Ajax and bind data normally.

public ActionResult Index()
        {

            //IEnumerable<EmpPersonalDetails> objemp = GetEmployeePersonnelDeatils();
            return View();
        }


 public IEnumerable<EmpPersonalDetails> GetEmployeePersonnelDeatils()
        {
            return objEmp.GetAllEmployees();
        }

     
        public ActionResult GetCustomers([DataSourceRequest]DataSourceRequest request)
        {

            return Json(GetEmployeePersonnelDeatils().ToDataSourceResult(request),JsonRequestBehavior.AllowGet);

        }

Here is my Index.cshtml code 

@{
    ViewBag.Title = "GetCustomers";
}

@model IEnumerable<Employee.Models.EmpPersonalDetails>

<div id="clientsDb">
    @(Html.Kendo().Grid<Employee.Models.EmpPersonalDetails>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Id).Width(140);
            columns.Bound(c => c.EmployeeName).Width(190);
            columns.Bound(c => c.Address);
            columns.Bound(c => c.Age).Width(110);
        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .DataSource(dataSource => dataSource
            .Ajax()
                  .Read(read => read.Action("GetCustomers", "Customer"))
                )
        
    )
</div>

<style scoped>
    #clientsDb {
        width: 952px;
        height: 396px;
        margin: 20px auto 0;
        padding: 51px 4px 0 4px;
        background: url('@Url.Content("~/content/web/grid/clientsDb.png")') no-repeat 0 0;
    }
</style>
<h2>GetCustomers</h2>

[Dimiter Madjarov]

Hi Prash,


The code looks correct. You could check the browsers JavaScript console for any JS errors. Additionally I would suggest to view the Network tab and inspect the HTTP requests. I assume that this will help to pin point the exact reason for the problem.

Regards,
Dimiter Madjarov
Telerik