Binding to a collection property of a View Model

[Michael]

I'm trying to bind a grid to a collection property of a view model. The grid displays the items just fine when the view loads (see attached screenshot) and I'm also able to edit the items. When I save, however, the collection property is empty (has a count of 0). Everything else in my view model posts just fine when I save - the issue is limited to this particular grid and collection property. Here's the relevant view code:

 

@(Html.Kendo().Grid(Model.JobTitleHistory)
                                .Name("JobTitleGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(jobTitle => jobTitle.JobTitle).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                                    columns.ForeignKey(jobTitle => jobTitle.PayPeriodEffectiveDateID, (IEnumerable<GCEdge.Models.ViewModels.ComboBoxLookupViewModel>)ViewData["payPeriodEffectiveDateLookup"], "Value", "Name")
                                        .Title("Effective Date")
                                        .Width(120)
                                        .HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
                                    columns.ForeignKey(jobTitle => jobTitle.PayPeriodEndingDateID, (IEnumerable<GCEdge.Models.ViewModels.ComboBoxLookupViewModel>)ViewData["payPeriodEndingDateLookup"], "Value", "Name")
                                        .Title("Ending Date")
                                        .Width(120)
                                        .HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });

                                })
                                .Editable(options => options.Enabled((ViewData["ViewPermissionLevel"].ToString() != "ReadOnly" && ViewData["ViewPermissionLevel"].ToString() != "Hidden")).Mode(GridEditMode.InCell))
                                .Pageable(options => options.PreviousNext(true))
                                .Sortable(true)
                                .Scrollable(options => options.Height(200)))

 

I've done some searching elsewhere on your forums and tried the approach demonstrated here with no luck either. I've included that code below as well for reference.

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/submit-grid-with-form/KendoUIMVC5/Views/Home/Index.cshtml

 

@(Html.Kendo().Grid(Model.JobTitleHistory)
                              .Name("JobTitleGrid")
                              .ToolBar(tools => tools.Create().Text("Add"))
                              .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                              .Columns(columns =>
                              {
                                  columns.Bound(jobTitle => jobTitle.JobTitle).ClientTemplate("#= JobTitle #" +
                                    "<input type='hidden' name='JobTitleHistory[#= index(data)#].JobTitle' value='#= JobTitle #' />"
                                  );

                                  columns.Bound(jobTitle => jobTitle.PayPeriodEffectiveDateID).ClientTemplate("#= PayPeriodEffectiveDateID #" +
                                    "<input type='hidden' name='JobTitleHistory[#= index(data)#].PayPeriodEffectiveDateID' value='#= PayPeriodEffectiveDateID #' />"
                                  );
                                  columns.Bound(jobTitle => jobTitle.PayPeriodEndingDateID).ClientTemplate("#= PayPeriodEndingDateID #" +
                                    "<input type='hidden' name='JobTitleHistory[#= index(data)#].PayPeriodEndingDateID' value='#= PayPeriodEndingDateID #' />"
                                  );
                              })
                              .DataSource(dataSource => dataSource.Ajax()
                                       .Model(model =>
                                       {
                                           model.Id(jt => jt.PayPeriodEndingDateID);
                                       })
                                       .ServerOperation(false)
                                  )

<script>                      )

function index(dataItem) {
        var data = $("#JobTitleGrid").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

</script>

[Viktor Tachev]

Hi Michael,

If you would like to use to enable CRUD operations for the Grid component and bind it server-side you should use the approach described in the following article.

• http://docs.telerik.com/aspnet-mvc/helpers/grid/editing/server-editing

Also, check out the example below that shows the functionality in action.

• http://demos.telerik.com/aspnet-mvc/Grid/ServerEditing

Regards,
Viktor Tachev
Progress Telerik

[Michael]

Thanks, Viktor. I've reviewed the documentation and the demonstration your referenced. That shows how to bind to a view model, which is not what I want to do - I want to bind to a collection property within my view model. Is there no way of doing this?

[Viktor Tachev]

Hello Michael,

Binding to complex objects is not available out of the box. Thus, in order for the components to work correctly I would recommend flattening the data and then passing it to the Grid. 

Regards,
Viktor Tachev
Progress Telerik