0

I'm new to Kendo and learning how to integrate it with MVC and display data in a grid.

My controller

[HttpGet]
public ActionResult StudentList([DataSourceRequest]DataSourceRequest request)
{
    DataSourceResult result = 
    _acc.GetStudent(StudId).ToDataSourceResult(request,
        model => new StudentModel
        {
            ID = model.ID,
            StudId = model.StudId,
            Name= model.Name,
            Email= model.FullName,
            custEmail = model.Email
        });


        return Json(result, JsonRequestBehavior.AllowGet);
}

My view

@(Html.Kendo().Grid<Models.StudentModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.StudId);
                    columns.Bound(c => c.Name);
                    columns.Bound(c => c.Email);
                })
                     .Pageable()
                     .Sortable()
                     .Filterable()
                     .Scrollable(scr => scr.Height(550))
                     .DataSource(dataSource => dataSource
                     .Ajax()
                     .Read(read => read.Action("StudList", "Student"))
                     .ServerOperation(false)
  )
)

And the out put I am getting in my browser looks like

{"Data":[{"ID":1102,"StudId":4006,"Name":"Adam Lyon","Email":"alyon@regionofwaterloo.ca",",....,

Does anyone has any idea why the data is not formatted in a grid form?

Medhanie W.
  • 149
  • 3
  • 12
  • 1
    Are you getting a console error? Your code is missing the closing paren ) for `DataSource(...` – Steve Greene Jan 07 '20 at 17:28
  • DataSource is already closed, it is down there, No error, all the data is coming but incorrect format, I want it in a Grid, but see above the output I have – Medhanie W. Jan 07 '20 at 17:35

1 Answers1

1

You will get that behavior if you link directly to the EmployeeList action - that should only be called by the grid. If your view name is say Index, you will need another action:

public ActionResult Index()
{
    return View();
}

Then in code link to that:

@Html.ActionLink("Employee List", "Index", "Employee")

Now the view will load and the Kendo grid will render and then call your EmployeeList action to populate the grid.

See the Kendo sample controller here. It has an action to load the view with the grid, and then CRUD actions the grid will call via AJAX.

Steve Greene
  • 12,029
  • 1
  • 33
  • 54
  • Sorry, where should I include the line of code `@Html.ActionLink("Employee List", "Index", "Employee")`? – Medhanie W. Jan 07 '20 at 18:11
  • Please, any help how we can get this working. I have created a separate Index view and included the above action. Now it is getting `500 - Internal server error.` – Medhanie W. Jan 07 '20 at 19:31
  • 1
    You can call the index controller action from your menu (_Layout), a link on your homepage, etc. If you are getting a 500 error (server error), it would most likely be within your read action. So set a debug point and see if you are hitting it. Also, the action link I gave is just an example. Your actual link would depend on your controller name. In this example, the controller would be "EmployeeController". Use the syntax @Html.ActionLink("Label","ActionName","ControllerName"). – Steve Greene Jan 07 '20 at 20:06