MVC 4 - Kendo Grid Data Binding

Question

Here is everything from my project:

ControllerA

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

public ActionResult User_Read()
{
    ViewModels.ViewModelA objView = new ViewModels.ViewModelA();

        objView.MyList = new List<ViewModels.SomeClass>();
        objView.MyList.Add(new ViewModels.SomeClass() { FirstName = "FN1", Supervisor = "SV1" });
        objView.MyList.Add(new ViewModels.SomeClass() { FirstName = "FN2", Supervisor = "SV2" });

        return Json(objView, JsonRequestBehavior.AllowGet);
}

ViewModelA

public class ViewModelA
{
    public List<SomeClass> MyList { get; set; }
}

public class SomeClass
{
    public string FirstName { get; set; }
    public string Supervisor { get; set; }
}

Index.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().Grid<Solution1.ViewModels.ViewModelA>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

Details: When I run this the page loads fine with no errors, however, none of the data is populated on the page. So, the grid is there but it only shows the column names of FirstName and Supervisor. I know you're not supposed to hardcode data, but I'm just trying to show something on the grid for now and I want the data to come from the Controller like it is.

Question: What do I need to change in order to show data on the grid? Also, from the data in the Controller, how can I add more than one row to the grid?

Update: The question I initially asked has partially been solved. Still need assistance to display the data to the grid.

Answer 1

There are two things that you need to do to get your code to work.

1. You need to return a list (or in fact anything that supports the IEnumerable interface).

2. You need to format the return data by calling ToDataSourceResult on it.

Hence

    public ActionResult User_Read([DataSourceRequest]DataSourceRequest request)
    {
        var model = new List<ViewModelA>()
        {
            new ViewModelA()
            {
                FirstName = "Name",
                Supervisor = "Mgr",
            },
            new ViewModelA()
            {
                FirstName = "FirstName",
                Supervisor = "Supervisor",
            },
        };

        return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

Everything else is exactly as you had it in your original example before you edited it.

Look at the Kendo demo solution and study the examples. It is not the best layed out demo and sometimes you need to go digging in the source code to find out exactly what is going on rather than just relying on what the demo seems to imply you need. For example in the Populating the Grid via Ajax demo the actual action method that gets called by the Ajax and returns the data is not shown in the demo!

Answer 2

Your need to bind the grid to a list in order to show multiple rows.

For example:

public class ViewModelA
{
    public List<SomeClass> MyList { get; set; }
}
public class SomeClass
{
    public string FirstName { get; set; }
    public string Supervisor { get; set; }
}

and then assign values to the list to display them in your grid.

ViewModelA objView = new ViewModelA()  ;
objView.MyList = new List<SomeClass>();
objView.MyList.Add(new SomeClass() { FirstName = "Test", Supervisor = "SomeValue" });
objView.MyList.Add(new SomeClass() { FirstName = "AnotherTest", Supervisor = "SomeMore" });

Pass your ViewModelA.MyList to grid to show all elements

@(Html.Kendo().Grid<Solution1.ViewModels.ViewModelA.MyList>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

Answer 3

here are few changes you have to make

Your data is available in MyList but you are creating the grid for ViewModelA , So you have to return the MyList from the controller and construct the grid with that list.

In Controller

    public ActionResult User_Read()
    {
        ViewModels.ViewModelA objView = new ViewModels.ViewModelA();

            oViewModelA objView = new ViewModelA()  ;
            objView.MyList = new List<SomeClass>();
            objView.MyList.Add(new SomeClass() { FirstName = "Test", Supervisor =                   "SomeValue" });
            objView.MyList.Add(new SomeClass() { FirstName = "AnotherTest", Supervisor = "SomeMore" });

            return Json(objView.MyList, JsonRequestBehavior.AllowGet);
    }

In the Index.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().Grid<SomeClass>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

Hope this helps.

Answer 4

What you have should work, from what I see, just change your return statement to this:

return Json(objView.MyList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

You already have the .Read(read => read.Action("User_Read", "ControllerA")) , so I don't know where others are saying that's something new to add or a revelation. You can make the list be a DataSourceResult directly and just return that.