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

Question

Can someone help us. Our client wants to have a kendo menu on the header of the kendo panelbar next to the "Remarks". how can we achieve this ? Thank you so much!

Below is our code:

 @(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

Try the following:

@(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));
    }))

And the jQuery part:

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

As far i know there is no solution for pure mvc wrappers.

Answer 2

It is impossible to achiev this in pure mvc component. The closest thing I can imagine would be put kendoTabstrip or kendoMenu inside of kendoPanelBar template and keep "Remarks" header.

On the other hand it is possible to implement it in jQuery. Simple after rendering of the kendoPanelBar you would need to find header element and change it on content or widget you want.

EDIT:

Here is example with panelbar build in javascript from <ul>...</ul> template: http://dojo.telerik.com/Ozisu

It just simply puts menu structure in panelbar header and uses:

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

to create menu from it.

For keep panelbar in MVC use html() method to paste menu structure into header like Przemysław Kleszcz said in his answer.