将Kendo UI网格绑定到对象列表

Question

The Kendo UI Grid just renders the column headers.

Grid does not render the actual data rows in the grid.

Here is my code.

 public class CalculatorController : Controller
{

    public ActionResult TimberData_Read()
    {
        var grades = new List<TimberGrades>();
        grades.Add(new TimberGrades() { TimberGrade = "C14", BendingParallelToGrain = 4.1 });
        grades.Add(new TimberGrades() { TimberGrade = "C16", BendingParallelToGrain = 5.3 });

        var result = grades.AsQueryable();
        return Json(result);
    }
}

public class TimberGrades
{
    public string TimberGrade { get; set; }
    public double BendingParallelToGrain { get; set; }

    public TimberGrades()
    {
        TimberGrade = "C14";
        BendingParallelToGrain = 4.1;
    }
}

Inside my view, I try to render the Grid as follows:

<div id="DivTimberGradeGrid">
    @(Html.Kendo().Grid<TimberBeamCalculator.Models.TimberGrades>()
        .Name("TimberGradeGrid")
        .DataSource(ds => ds
                        .Ajax()
                        .Read(r => r.Action("TimberData_Read", "Calculator"))   
        )
        .Columns(c=> 
                    {
                        c.Bound(t => t.TimberGrade);
                        c.Bound(t => t.BendingParallelToGrain);
                    }
        )
    )


</div>

Answer 1

I just figured it out myself.

In my controller class:

using Kendo.Mvc.Extensions;

.....

        public ActionResult TimberData_Read([DataSourceRequest]DataSourceRequest request)
        {
            var grades = new List<TimberGrades>();
            grades.Add(new TimberGrades() { TimberGrade = "C14", BendingParallelToGrain = 4.1 });
            grades.Add(new TimberGrades() { TimberGrade = "C16", BendingParallelToGrain = 5.3 });

            IQueryable<TimberGrades> res = grades.AsQueryable<TimberGrades>();
            DataSourceResult res1 = res.ToDataSourceResult(request);
            return Json(res1, JsonRequestBehavior.AllowGet);
        }

....

and in the view


        <p>
            <div id="DivTimberGradeGrid">
                @(Html.Kendo().Grid<TimberBeamCalculator.Models.TimberGrades>()
                    .Name("TimberGradeGrid")
                    .DataSource(ds => ds
                                    .Ajax()
                                    .Read(r => r.Action("TimberData_Read", "Calculator"))   
                    )
                    .Columns(c=> 
                            {
                                c.Bound(t => t.TimberGrade);
                                c.Bound(t => t.BendingParallelToGrain);
                            }
                    )
                )


            </div>
        </p>