Question

我有一个剑道PanelBar，目前有两个面板。在Ist面板中，我有一个剑道TreeView，在第二个面板中，我有多个剑道AutoComplete。现在，我必须在每个AutoComplete上方插入标签以显示一些信息，并在AutoComplete的内容上执行按钮以执行操作。我无法找到为此编写HTML的地方。

这是我的.cshtml代码来渲染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

我使用Ajax内容加载器执行此操作：

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

我写了一个我希望在局部视图中显示的html，并用来自Kendo的ajax调用它：

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

)

您提取的部分视图可能包含KendoUI自动填充功能以及html中的标签。

在Kendo Panelbar中编写HTML

1 个答案: