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

Ajax forms in PanelBar item content

1 Answer 55 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Zach
Top achievements
Rank 1
Zach asked on 22 Aug 2013, 05:10 PM
Hi,

I'm noticing a weird issue when I try to use "@using (Ajax.BeginForm(...)) { }" within Items' Contents. All of the form elements that end up inside of each PanelBar item are all being rendered outside of the PanelBar (placed right before the rendered PanelBar's ul element). For example, this code:

@(Html.Kendo().PanelBar()
    .Name("accordion")
    .Items(bar =>
        {
            bar.Add().Text("One")
                .Content(@<div>
                           @using (Ajax.BeginForm("OneSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultOne"}))
                            {
                                @Html.DemoPartial("Partial")
                                <div id="resultOne"></div>
                            }
                        </div>);
            bar.Add().Text("Two")
                .Content(@<div>
                           @using (Ajax.BeginForm("TwoSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultTwo"}))
                            {
                                @Html.DemoPartial("Partial")
                                <div id="resultOne"></div>
                            }
                        </div>);
            bar.Add().Text("Three")
                .Content(@<div>
                           @using (Ajax.BeginForm("OneSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultThree"}))
                            {
                                @Html.DemoPartial("Partial")
                                <div id="resultThree"></div>
                            }
                        </div>);
         }))
Results in:
<form ...></form>
<form ...></form>
<form ...></form>
<ul class="k-widget k-panelbar k-reset k-header" id="accordion" data-role="panelbar" tabindex="0" role="menu">
... No forms in here ...
</ul>

Is there something incorrect about how I'm setting up the PanelBar or is there a workaround I can use to get the functionality I need?

Thanks,
Zach







1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 26 Aug 2013, 06:50 AM
Hello Zach,

It is because of the order the Razor @() operator outputs the markup. To make it work change the PanelBar rendering from:

@(Html.Kendo().PanelBar()
 ....
)
to
@{Html.Kendo().PanelBar()
 
 
.Render();}


Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
PanelBar
Asked by
Zach
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or