Kendo UI Grid rendering from JSON data not working

[Kris Nobels]

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":"[e-mail]","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':'[e-mail]','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 ?

[Atanas Korchev]

Hello,

 The problem is that the result isn't in the format expected by Kendo Grid for ASP.NET MVC. I recommend checking the ajax binding help topic which shows how to convert an IEnumerable to DataSourceResult which is rerialized to the expected format.

Regards,
Atanas Korchev
Telerik

[Kris Nobels]

Thanks it works now :-)

[Mark]

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

[Mark]

Nevermind - seems the AllowGet prevented it from working. Removed it and all ok now.

[Bhavesh]

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;
      }
    }

[Boyan Dimitrov]

Hello,

I guess that the problem here is missing to include a reference to the kendo.aspnetmvc.min.js script. Please refer to the https://docs.telerik.com/aspnet-mvc/helpers/grid/troubleshoot/known-exceptions#sensitive-information-error-message article for more information. 

Regards,
Boyan Dimitrov
Progress Telerik

[Tariq]

 https://docs.telerik.com/aspnet-mvc/helpers/grid/troubleshoot/known-exceptions#sensitive-information-error-message 

page not found

 

 

[Nikolay]

Hello Tariq,

Here is the correct link to the article:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/troubleshoot/known-exceptions#sensitive-information-error-message

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik