Dynamically creating panel bar items containing partial views and models

2 posts, 0 answers
  1. Jason
    Jason avatar
    3 posts
    Member since:
    Dec 2013

    Posted 13 Mar 2015 Link to this post

    I want to dynamically create several panel sections that each contain a partial view and have each bind to a corresponding model.
    I have a main model that contains a list of child models. Each child model has a property to specify the name of it's partial view.

    The logic below correctly outputs each panel's content by using a foreach statement.
    The issue I'm having is the "for each" loses my child models when I post my main model back to the controller on save.
    How can I perform the same logic utilizing a "BindTo" instead of a "foreach"?
    Are their any other ways to dynamically create panel bars containing partial views via a model collection?

        @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandMode(PanelBarExpandMode.Multiple)
            .Animation(animation => animation.Enable(false))
            .Items(panelbar =>
            {
                foreach (ModelBase childModel in Model.ChildModels)
                {
                    panelbar.Add()
                        .Text(childModel.PartialViewTitle)
                        .Content(@<section>
                            @Html.Partial(childModel.PartialViewName, childModel)
                        </section>);
                }
            }));








  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 Mar 2015 Link to this post

    Hello Jason,

    You can use the following approach to bind the panelbar with the BindTo method:
    .BindTo(Model.ChildModels, mapping =>
    {
        mapping.For<ModelBase>(binding => binding.ItemDataBound((panel, childModel) =>
            {
                panel.Text = childModel.PartialViewTitle;
                panel.Template.InlineTemplate = @<text>
                    @Html.Partial(childModel.PartialViewName,, childModel)
                </text>;
            }));
    })
    However, if the ChildModels are lost when posting the form then the same will occur with this approach. You should either repopulate the ChildModels in the post action or render inputs for the ChildModels fields that will be posted with the form e.g.
    .BindTo(Model.ChildModels, mapping =>
    {
        var index = 0;
        mapping.For<ModelBase>(binding => binding.ItemDataBound((panel, childModel) =>
            {          
                panel.Text = childModel.PartialViewTitle;
                panel.Template.InlineTemplate = @<text>
                    @Html.Hidden(string.Format("ChildModels[{0}].PartialViewTitle", index), childModel.PartialViewTitle)
                    @Html.Hidden(string.Format("ChildModels[{0}].PartialViewName", index), childModel.PartialViewName)
                    @{
                        index++;
                    }
                    @Html.Partial(childModel.PartialViewName,, childModel)
                </text>;
            }));
    })


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top