Question

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

以下是我们的代码：

 @(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之后，您需要找到标题元素并在您想要的内容或小部件上进行更改。

编辑：

以下是来自＆lt; ul＆gt; ...＆lt; / ul＆gt;的javascript中使用面板栏构建的示例模板：http://dojo.telerik.com/Ozisu

它只是将菜单结构放在panelbar标题中并使用：

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

从中创建菜单。

为了保持MVC中的panelbar，使用html（）方法将菜单结构粘贴到标题中，就像PrzemysławKleszcz在他的回答中所说。

是否可以在Kendo Panelbar标题上添加Kendo菜单？

2 个答案: