Kendo Panelbar MVC - Trying to Open Popup by clicking on a menu item

Question

Kendo Panelbar MVC - Trying to Open Popup by clicking on a menu item

962 Views Asked by Savan Parmar At 19 April 2025 at 20:20

In my program we have Kendo Panel bar which shows menu, i want to open a dialog box/ popup window when user clicks on any menu child item.

    <div>
        @(Html.Kendo().PanelBar()
    .Name("panelbar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Events(events => events
        .Select(@<text> ReportController.onSelect </text>))
    .Items(panelbar =>
    {
        panelbar.Add().Text("Test1")
            .Expanded(true)
            .Items(Test1=>
            {
                workers.Add().Text("Sample1");
                workers.Add().Text("Sample2");
                workers.Add().Text("Sample3");
            });

        panelbar.Add().Text("Test2")
            .Items(Test2 =>
            {
                clients.Add().Text("Book1")
                    .Items(costings =>
                    {
                        costings.Add().Text("Page1");
                        costings.Add().Text("Page2");
                        costings.Add().Text("Page3");       
                    });

                clients.Add().Text("Book2");
            });
        panelbar.Add().Text("New Page").Enabled(false);
    })
        )
    </div>
<script type="text/javascript">
    $(document)
        .ready(function() {
            ReportController.init("#panelBar");
        });
</script>

If user clicks on Sample1 here it should open a popup window. i am new with kendo controls, how can i achieve this?

Original Q&A

There are 1 best solutions below

**Vijay Chauhan** · Answer 1

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/panelbar/events">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>

    <div id="example">
        <div class="demo-section k-content">
            <ul id="panelbar">
                <li class="k-state-active">
                    Metallica - Master of Puppets 1986
                    <ul>
                        <li>Battery</li>
                        <li>Master of Puppets</li>
                        <li>The Thing That Should Not Be</li>
                        <li>Welcome Home (Sanitarium)</li>
                        <li>Disposable Heroes</li>
                        <li>Leper Messiah</li>
                        <li>Orion (Instrumental)</li>
                        <li>Damage, Inc.</li>
                    </ul>
                </li>
                <li>
                    Iron Maiden - Brave New World 2000
                    <ul>
                        <li>The Wicker Man</li>
                        <li>Ghost Of The Navigator</li>
                        <li>Brave New World</li>
                        <li>Blood Brothers</li>
                        <li>The Mercenary</li>
                        <li>Dream Of Mirrors</li>
                        <li>The Fallen Angel</li>
                        <li>The Nomad</li>
                        <li>Out Of The Silent Planet</li>
                        <li>The Thin Line Between Love And Hate</li>
                    </ul>
                </li>
                <li>
                    Empty Item
                </li>
                <li>
                    Ajax Item
                    <div></div>
                </li>
                <li>
                    Error Item
                    <div></div>
                </li>
            </ul>
        </div>
        <div id="console" class="box" style="display:none">
            <h4>Console log</h4>
            <div class="console"></div>
        </div>
    </div>
    <script>
        $(function () {
            $("#console").dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });
        });

        function onSelect(e) {
            var theDialog = $("#console").dialog("open");
            theDialog.dialog("open");

            kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
        }

        function onExpand(e) {
            kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
        }

        function onCollapse(e) {
            kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
        }

        function onActivate(e) {
            kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
        }

        function onContentLoad(e) {
            kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
                             "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
        }

        function onError(e) {
            kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
        }

        $("#panelbar").kendoPanelBar({
            expandMode: "single",
            select: onSelect,
            expand: onExpand,
            collapse: onCollapse,
            activate: onActivate,
            contentLoad: onContentLoad,
            error: onError,
            contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]
        });
    </script>

</body>
</html>

In above example, you can observe that in OnSelect Event , i have opened a Div as an Dialog(Model), for which i have intialised that in its above function.

Hope it helps.. !!

Kendo Panelbar MVC - Trying to Open Popup by clicking on a menu item

There are 1 best solutions below

Related Questions in ASP.NET-MVC

Related Questions in KENDO-UI

Related Questions in TELERIK-MVC

Related Questions in KENDO-PANELBAR

Related Questions in PANELBAR

Trending Questions

Popular # Hahtags

Popular Questions