This is a migrated thread and some comments may be shown as answers.

Binding to a collection property of a View Model

3 Answers 1535 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 17 Jun 2017, 03:32 PM

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>

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 21 Jun 2017, 01:39 PM
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.


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



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michael
Top achievements
Rank 1
answered on 21 Jun 2017, 07:12 PM
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?
0
Viktor Tachev
Telerik team
answered on 26 Jun 2017, 02:29 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Michael
Top achievements
Rank 1
Share this question
or