Ajax forms in PanelBar item content

[Zach]

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

[Petur Subev]

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