是否可以在剑道面板栏标题上添加剑道菜单？

Question

有人可以帮助我们吗？我们的客户希望在剑道面板栏的标题旁边的“备注”旁边有一个剑道菜单。我们怎样才能做到这一点？非常感谢！

下面是我们的代码：

 @(Html.Kendo().PanelBar()
        .Name("AnnotationRemarks")
        .HtmlAttributes(new { @class = "pnlAnnotationRemarks" })
        .Items(items =>
        {
            items.Add()
                .Text("Instructions")
                .HtmlAttributes(new { @class = "annotationPanelHeader" })
                .Content(@<text> @(InstructionsList()) </text>);
            items.Add()
                .Text("Remarks")
                .HtmlAttributes(new { @class = "annotationPanelHeader" })
                .Content(@<text> @(RemarksList()) </text>

                );
        })
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Events(e =>
        {
            e.Expand("OnPanelExpand");
            e.Collapse("OnPanelCollapsed");
        })
        .Animation(a =>
        {
            a.Collapse(c => c.Duration(0));
            a.Expand(e => e.Duration(0));
        })
    )

Answer 1

尝试以下方法：

@(Html.Kendo().PanelBar()
    .Name("AnnotationRemarks")
    .HtmlAttributes(new { @class = "pnlAnnotationRemarks" })
    .Items(items =>
    {
        items.Add()
            .Text("Instructions")
            .HtmlAttributes(new { @class = "annotationPanelHeader" })
            .Content(@<text> @(InstructionsList()) </text>);
        items.Add()
            .Text("Remarks")
            .HtmlAttributes(new { @class = "annotationPanelHeader" })
            .Content(@<text> @(RemarksList()) </text>);
        items.Add()
       .Text("Menu")
       .HtmlAttributes(new { @id = "annotationPanelHeaderMenu" })
    })
    .ExpandMode(PanelBarExpandMode.Multiple)
    .Events(e =>
    {
        e.Expand("OnPanelExpand");
        e.Collapse("OnPanelCollapsed");
    })
    .Animation(a =>
    {
        a.Collapse(c => c.Duration(0));
        a.Expand(e => e.Duration(0));
    }))

还有 jQuery 部分：

$(document).ready(function () {
    $("#annotationPanelHeaderMenu").html('<ul id="menuExample"><li>Test1</li><li>Test2</li><li>Test3</li></ul>')
    $("#menuExample").kendoMenu();
});

据我所知，没有纯 mvc 包装器的解决方案。

Answer 2

在纯 mvc 组件中是不可能做到这一点的。我能想象的最接近的事情是将 kendoTabstrip 或 kendoMenu 放在 kendoPanelBar 模板中并保留“备注”标题。

另一方面，可以在 jQuery 中实现它。在渲染 kendoPanelBar 之后很简单，您需要找到标题元素并在您想要的内容或小部件上更改它。

编辑：

这里是使用

...

模板在 javascript 中构建面板栏的示例：http://dojo.telerik.com/Ozisu

它只是简单地将菜单结构放在面板栏标题中并使用：

$(document).ready(function() {
    $("#menu").kendoMenu();
});

从中创建菜单。

为了在 MVC 中保留面板栏，请使用 html() 方法将菜单结构粘贴到标题中，就像 Przemysław Kleszcz 在他的回答中所说的那样。