Kendo panelBar.append Content

Question

I want to append a new panel using panelBar.append, formatting the content within using .Content(@<text></text>);

Like this example when I use panelBar.Add()

 panelbar.Add().Text("New Person")
                     .Content(@<text>
        <br />
        <br />
           <div class="form-group">
                @Html.LabelFor(model => model.firstName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.firstName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.firstName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.surName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.surName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.surName, "", new { @class = "text-danger" })
                </div>
            </div>


                    </text>);



 $("#panelbar").kendoPanelBar();
                    var panelBar = $("#panelbar").data("kendoPanelBar");

                    panelBar.append(

                        {
                            text: "New Person",
                            encoded: true,
                            content: "How to I place this <text>?"

                        }

                        )

How Can I do this using .append? Thank you

Answer 1

So you'll need to set encoded: false as you want it to render html and you don't need the <text>

Then you should be able to do this...

panelBar.append(
{
    text: "New Person",
    encoded: false,
    content: '<br /><br /><div class="form-group">@Html.LabelFor(model => model.firstName, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.firstName, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.firstName, "", new { @class = "text-danger" })</div></div><div class="form-group">@Html.LabelFor(model => model.surName, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.surName, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.surName, "", new { @class = "text-danger" })</div></div>'
});

Don't forget the the helpers are invoked (html created) when the page loads, not when your JS function is invoked