Question

I am having difficulty getting the data to show in a Telerik Grid control. I populate a list object GraphDetail in my ViewModel. Then try to use Model.GraphDetail to bind the data to the grid in the view. The project compiles and runs without error and the grid does show but it is empty. If I step through the code I can see that the GraphDetail is being populated with data.

Here is my ViewModel:

namespace AESSmart.ViewModels
{
    public class ACVoltagesTelerikGraph
    {
        public long InverterID { get; set; }
        public string InverterName { get; set; }
        public double? voltage_ac_a { get; set; }
        public double? voltage_ac_b { get; set; }
        public double? voltage_ac_c { get; set; }
        public DateTime recordTime { get; set; }
    }

    public class GraphsACVoltagesViewModel
    {
        public DateTime startingDate { get; set; }
        public DateTime endingDate { get; set; }

        public string HCSeries { get; set; }
        public List<ACVoltagesTelerikGraph> GraphDetail { set; get; }

        public void setLists()
        {
            //Code to populate InverterGoups and Inverters
        }

        public void setSeries()
        {
            //Code to populate GraphDetail and HCSeries
        }
    }
}

My View contains the following code to display the grid:

@model AESSmart.ViewModels.GraphsACVoltagesViewModel

@(Html.Telerik().Grid(Model.GraphDetail)
    .Name("Grid")
    .DataBinding(dataBinding => dataBinding.Server())
    .Columns(columns =>
    {
        columns.Bound(o => o.InverterID).Title("InverterID").Width(25);
        columns.Bound(o => o.InverterName).Title("InverterName").Width(100);
        columns.Bound(o => o.voltage_ac_a).Title("Phase 1 Volts").Width(75);
        columns.Bound(o => o.voltage_ac_b).Title("Phase 2 Volts").Width(75);
        columns.Bound(o => o.voltage_ac_c).Title("Phase 3 Volts").Width(75);
        columns.Bound(o => o.recordTime).Title("Record Time").Width(150);
    })
    .Groupable()
    .Sortable()
    .Filterable()
    .Pageable(pager => pager.PageSize(3))
)

Here is a screenshot of the result:

As you can see from the screenshot the grid is empty. So, how do I properly bind the GraphDetail list I have in my ViewModel to the grid?

Answer 1

I actually encountered a very similar problem. I could not get the graph to populate based on a list. In order to fix it I had to change the list to a collection. Try to use the following code for your scenario:

public virtual ICollection<ACVoltagesTelerikGraph> GraphDetail { set; get; }

Also, it looks like you are building the data as part of a larger class in the ViewModel. So, your controller is not going to be exclusively handling the creation of the model the grid is using. So, ‘server binding’ probably won’t work for you. Not to mention, it looks like you are just trying to show the data to the user and not needing them to modify it at all. So I would databind on the client side like so:

@(Html.Telerik().Grid(Model.GraphDetail)
    .Name("Grid")
    .DataBinding(dataBinding => dataBinding
        .Ajax()
        .OperationMode(GridOperationMode.Client)           
    )