My custom class:
public class StructuredUtility
{
public string Provider { get; set; }
public string Type { get; set; }
public List<EmPemUtilityEntity> Bills { get; set; }
public string Id { get; set; }
}
My Kendo Grid Widget (where Model.myUtilites is a List of StructuredUtility's):
@(Html.Kendo().Grid(Model.myUtilities)
.Name
("UtilitiesGrid")
.Columns
(columns =>
{
columns.Bound(p => p.Type).Title("Type").Filterable(true).Width(250);
columns.Bound(p => p.Provider).Title("Provider").Filterable(false).Width(100);
columns.Bound(p => p.Bills.Count).Title("Count").Filterable(false).Width(100);
})
.ToolBar(toolbar => toolbar
.Custom()
.Text("Add New Utility")
.HtmlAttributes(new { id = "addUtility" }))
.Editable(editable => editable
.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable(scr => scr
.Height(430))
.Filterable(filtering => filtering
.Mode(GridFilterMode.Menu))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model
.Id(p => p.Id))
.PageSize(30)
.Read(read => read
.Action("ReadGridEntity", "Site"))
)
)
The third column in my grid is empty for all my rows. Digging through the HTML i found this interesting little snippet:
{"Provider":{"type":"string"},"Type":{"type":"string"},"Bills":{"type":"object"}