This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid rendering from JSON data not working

8 Answers 1661 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Kris Nobels asked on 28 May 2013, 08:43 AM

Hello,

I have a problem with my kendo UI Grid visualize the JSON content.

Here is my code from the view:

@(Html.Kendo().Grid<Models.SellerModel>()
.Name("Sales")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetSales", "Beheer"))
.Model(model => model.Id(p => p.Id))
)
.Columns(columns =>
{
columns.Bound(o => o.Id).Width(60);
columns.Bound(o => o.Firstname).Width(90);
columns.Bound(o => o.Surename).Width(220);
columns.Bound(o => o.Emailaddress).Width(280);
columns.Bound(o => o.Mobile).Width(110);
columns.Bound(o => o.RegionId).Width(110);
columns.Bound(o => o.Deleted).Width(110);
})
)

This is the JSON:
[{"Id":1,"Surname":"blablabla","Firstname":"Kris","Mobile":"545645644654","Emailaddress":"test@hotmail.com","RegionId":3,"Deleted":false}]

But i searched on the forum and i changed to this
{data:[{'Id':1,'Surname':'blablabla','Firstname':'Kris','Mobile':'545645644654','Emailaddress':'test@hotmail.com','RegionId':3,'Deleted':false}]}

Still no progress here. :-(

What is wrong here ?
Because i only have headers as result. :-(

Can anyone tell me what i need to do or change ?

8 Answers, 1 is accepted

answered on 22 Dec 2014, 12:03 PM

I have the same issue. However it is not fixed by the Ajax method, I followed 'Using View Models' of the Ajax Binding page to the letter. Incidentally I needed the View model due to the annoying 'circular reference issue'.

I have enabled AllowGet (return Json(result, JsonRequestBehavior.AllowGet);) so I can see what is returned when I go to the Read action method directly. It returns what appears to be properly formatted JSON of my data (there are 4 records correctly present).

However the grid refuses to show any data at all, just headers. Any troubleshooting tools I can use to find out why?

Thanks

answered on 09 Feb 2018, 04:07 PM

I'm having the same issue. Used the View Model to eliminate the circular reference error. Tried return without the AllowGet, but get the error: "his request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet." Kendo.Mvc version 2018.1.117.545

Action code:

    public ActionResult StudentAccountsDataRead([DataSourceRequest]DataSourceRequest request)
    {
      IQueryable<StudentAccountViewModel> studentAccounts = StudentAccountClass.GetAllStudentAccounts();
      return Json(studentAccounts.ToDataSourceResult(request));
    }

Index code:

        @(Html.Kendo().Grid<StudentAccountViewModel>()
                    .Name("GridAccounts")
                    .Columns(columns =>
                    {
                        columns.Bound(s => s.StudentAccountId).Title("Acct Id");
                        columns.Bound(s => s.CASId).Groupable(false).Title("CAS Id");
                        columns.Bound(s => s.StudentEmail).Title("Email");
                        columns.Bound(s => s.AccountInfoReceived).Title("Info Received");
                        columns.Bound(s => s.Retries).Title("# Emails Sent");
                        columns.Bound(s => s.AccountCreateDate).Title("Acct Date");
                    })
                    .Sortable()
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("StudentAccountsDataRead", "Account").Type(HttpVerbs.Get))
                    .PageSize(20)
                )
        )

GetAllStudentAccounts code:

    public static IQueryable<StudentAccountViewModel> GetAllStudentAccounts()
    {
      var dbctx = new StudentAccountAddEntities();
      try
      {
        return dbctx.StudentAccounts.Include(s => s.UtlAcademicYear).Select(account => new StudentAccountViewModel
        {
          StudentAccountId = account.StudentAccountId,
          StudentYear = account.StudentYear,
          StudentUniqueId = account.StudentUniqueId,
          StudentEmail = account.StudentEmail,
          AccountInfoReceived = account.AccountInfoReceived,
          Retries = account.Retries,
          AccountCreateDate = account.AccountCreateDate,
          AcademicYear = account.UtlAcademicYear.AcademicYear
        });
      }
      catch(Exception ex)
      {
        return null;
      }
    }