CODEWITHSUNDEEP
javascripthtmlasp.net-mvckendo-uikendo-asp.net-mvc
Vince
Vince

Reputation: 45

Is it possible to add Kendo Menu on Kendo Panelbar header?

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

Upvotes: 1

Views: 637

Answers (2)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

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.

Upvotes: 1

Przemysław Kleszcz
Przemysław Kleszcz

Reputation: 646

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.

Upvotes: 2

Related Questions