Write HTML inside Kendo Panelbar

Question

I have a Kendo PanelBar which is having two panels currently. In Ist panel I am having a Kendo TreeView and in 2nd panel, I am having multiple Kendo AutoCompletes. Now I have to insert Labels above each AutoComplete to display some information and also a Button to perform action on the content of AutoCompletes. I am not able to find where to write my HTML for that.

Here is my .cshtml code to render PanelBar

@{Html.Kendo().PanelBar()
      .Name("PanelBar")
      .ExpandMode(PanelBarExpandMode.Single)
      .Items(item =>
           {
               item.Add()
                   .Text("My Cloud")
                   .Content(() =>
                   {
                       Html.Kendo().TreeView()
    .Name("serverTree")
    .DragAndDrop(false)
    .ExpandAll(true)
    .Events(events => events
               .Select("onSelect")
     )

    .BindTo(Model as System.Collections.IEnumerable, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
    {
       ...

//removed for brevity
       ...
    }).Render();
                   });


               item.Add()
                   .Text("Search")
                   .Content(() =>
                   {
//this is where I need to insert a label

                       Html.Kendo().AutoComplete()
          .Name("Category")
          .Filter("startswith")
          .Placeholder("Enter Category...")
          .BindTo(new string[] {
                "Albania",
                "Andorra",
                "Armenia",
                "Austria",
                "Azerbaijan",
                "Belarus",
                "Belgium",
                "Bosnia & Herzegovina",
                "Bulgaria"
          })

          .Separator(", ").Render();
//another label
                       Html.Kendo().AutoComplete()
         .Name("SubCategory")
         .Filter("startswith")
         .Placeholder("Enter SubCategory...")
         .BindTo(new string[] {
                "Albania",
                "Andorra",
                "Armenia",
                "Austria",
                "Azerbaijan",
                "Belarus",
                "Belgium",
                "Bosnia & Herzegovina",
                "Bulgaria"
          })

         .Separator(", ").Render();

         //another label

        Html.Kendo().AutoComplete()
        .Name("Keywords")
        .Filter("startswith")
        .Placeholder("Enter keywords...")
        .BindTo(new string[] {
                "Albania",
                "Andorra",
                "Armenia",
                "Austria",
                "Azerbaijan",
                "Belarus",
                "Belgium",
                "Bosnia & Herzegovina",
                "Bulgaria"
          })

        .Separator(", ").Render();

//And finally the button                  

 });


           })
           .Render();
}

Answer 1

I did this with Ajax content loader:

http://demos.kendoui.com/web/panelbar/ajax.html

I wrote the html that I wanted displayed in a partial view and called it with ajax from Kendo:

@(
    Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(panelbar =>
            panelbar
                .Add()
                .Text("BODY")
                .LoadContentFrom(Url.Content("somepartialviewURL")))
)

The partial view that you pull in could have the KendoUI Autocomplete and the label before it in html.