MVC Grid not populating from datasource when using AJAX

2 posts, 0 answers
  1. Kenneth
    Kenneth avatar
    1 posts
    Member since:
    Nov 2014

    Posted 20 Apr 2015 Link to this post

    Hi All,

    I am implementing a project based on one of the Telerik
    examples as part of learning KendoUI and MVC.  It is not going well.

    By reviewing the browser console on Firefox 37.0.1 and IE 11
    I have resolved all JavaScript errors.   All libraries appear to be loading.

    The grid populates fine when using server binding but with
    Ajax I have the following problem:

    If I use this return statement:
          return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
    I get a nicely formatted but empty grid.

    If I use this return statement:
         return Json(result, JsonRequestBehavior.AllowGet);
    I get my expected data dumped to the screen but no grid.

     

    The data being returned by the controller looks like this:

    {"Data":[{"EmployeeID":"FITS-0001","FirstName":"John","LastName":"Doe","EmailAddress":"jdoe@acme.com","TelephoneNumber":null,"UserID":"johndoe","JobTitle":null,"EmployeeStatus":null}, {"EmployeeID":"FITS-0002","FirstName":"Jane","LastName":"Doe","EmailAddress":"janedoe@acme.com","TelephoneNumber":null,"UserID":"janedoe","JobTitle":null,"EmployeeStatus":null}],"Total":2,"AggregateResults":null,"Errors":null}

    My code is below.  Any pointers would be greatly appreciated. 

    Controller -- EmployeeController
     
    using System.Linq;
    using System.Web.Mvc;
    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using TestBagWeb.Models;
    using TestBagWeb.DAL;
     
    namespace TestBagWeb.Controllers
    {
        public class EmployeeController : Controller
        {
            public ActionResult Employees_JsonRead([DataSourceRequest]DataSourceRequest request)
            {
                using (TestBagContext employeeData = new TestBagContext())
                {
                    IQueryable<Employee> employees = employeeData.Employees;
                    DataSourceResult result = employees.ToDataSourceResult(request);
                    return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
                    //return Json(result, JsonRequestBehavior.AllowGet);           
                }
            }
        }
    }

    View -- Employee/Index
     
     
    @{
        ViewBag.Title = "Test Bag";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
     
     
     
    @(Html.Kendo().Grid<TestBagWeb.Models.Employee>()
          .Name("employeeGrid")
          .Columns(columns =>
          {
            columns.Bound(c => c.EmployeeID);
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.LastName);
            columns.Bound(c => c.EmailAddress);
            columns.Bound(c => c.TelephoneNumber);
            columns.Bound(c => c.UserID);
            columns.Bound(c => c.JobTitle);
            columns.Bound(c => c.EmployeeStatus);
            columns.Bound(c => c.FullName);
            columns.Bound(c => c.EmployeeName);
          })
          .Scrollable()
          .Sortable()
          .Pageable()
          .DataSource(dataSource => dataSource
              .Ajax()
                  .Read(read => read.Action("Employees_JsonRead", "Employee"))
          )
    )

     

    Regards


  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 21 Apr 2015 Link to this post

    Hello Kenneth,

    When binding the Grid via Ajax, the read action should only return a JSON converted to dataSourceResult. The complete approach is described on the following documentation page.

    Let me know if it helped you to resolve the issue.

    Regards,
    Dimiter Madjarov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top