Open Window from Menu Item Click by Using Ajax

Environment

Product	Telerik UI for ASP.NET Core Menu
Product Version	Created with version 2024.4.1112

Description

How can I use a Telerik UI for ASP.NET Core Menu item click to open a Telerik UI for ASP.NET Core Window?

Solution

1. Declare the Menu component.
2. Handle the Select event of the Menu.
3. In the event handler, get the id attribute of the current item.
4. Conditionally check if the id is the expected one (openWindow).
5. Implement an Ajax request to an Action Method, which is specified in the Menu item.
6. In the Action Method, return a Partial View with the Window.

Razor

    @{Html.Kendo().Menu()
          .Orientation(MenuOrientation.Horizontal)
          .Name("applicationMenu")
          .Items(menu => menu.Add().Text("Home").Items(homeMenu =>
              {
                  homeMenu.Add().Text("Show Window").Action("RenderWindow", "Home").HtmlAttributes(new { id = "openWindow" });
              }))
          .Events(e => e.Select("onSelect"))
          .Render();
    }

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-menu name="applicationMenu" on-select="onSelect">
        <items>
            <menu-item text="Home">
                <sub-items>
                    <menu-item text="Show Window" id="openWindow" asp-action="RenderWindow" asp-controller="Home"></menu-item>
                </sub-items>
            </menu-item>
        </items>
    </kendo-menu>

JavaScript

    <script type="text/javascript">
        function onSelect(e) {
    
            var itemId = $(e.item).attr("id");
    
            // Check if the menu item it the one, which must request the Partial View with the Window.
            if (itemId == "openWindow") {
                var url = $(e.item).find("a").attr("href");
                // Stop the link from redirecting to another page.
                e.preventDefault();
                // Request the Partial View with the Window.
                $.ajax({
                    url: url,
                    success: function (data) {
                        $("#main").append(data);
                    }
                });
            }
        }
    </script>

C#

    public IActionResult Index()
    {
        return View();
    }
    public ActionResult RenderWindow()
    {
        return PartialView("ShowWindow");
    }

PartialView

    <script type="text/javascript">
    	 // Destroy the Window after close to allow the opening of multiple Windows.
    	 function onClose(e) {
    		 itemForDelete = $(this.element);
    		 this.destroy();
    		 itemForDelete.remove();
    	 }
    </script>



    @(Html.Kendo()
    		.Window()
    		.Name("window")
    		.Title("My Window Title")
    		.Content(@<text>This is the content of a window, opened with ajax.</text>)
    		.Modal(true)
    		.Actions(a => a.Close())
    		.Draggable()
    		.Resizable()
    		.Width(400)
    		.Height(300)
    		.Events(e => e.Close("onClose"))
    )

For the complete implementation of the suggested approach, refer to the ASP.NET MVC project on how to open a Window when a specified Menu item is clicked. You can use this as a starting point to configure the same setup in an ASP.NET Core project.

More ASP.NET Core Menu Resources

• ASP.NET Core Menu Documentation

• ASP.NET Core Menu Demos

• ASP.NET Core Menu Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Menu for ASP.NET Core

• Server-Side API Reference of the Menu for ASP.NET Core

• Server-Side TagHelper API Reference of the Menu for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base