Kendo Menu item click open new window

13 posts, 0 answers
  1. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 13 Sep 2013 Link to this post

    How do you set a Kendo menu item to open in a new window?
  2. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 16 Sep 2013 Link to this post

    Hey Telerik,
    Do I need to create a support ticket every time I have a question? You don't seem to reply in a timely manner to forum posts.

    I would just like to see an example of how to create a client side click event on a menu item to pop it up in either a new window or a kendo modal dialogue. None of the examples in your demos show how to do this, and I have been unable to find anything related to this in either the documentation or the forums.
  3. Kendo UI is VS 2017 Ready
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 16 Sep 2013 Link to this post

    In case anybody was having a similar issue, this is what we came up with:
    @using PortalWeb.Models
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="/css/default.css" rel="stylesheet" type="text/css" />
        <script language="javascript" type="text/jscript" src="/shared/mvc/javascript/jquery.min.js"></script>
        <link rel="stylesheet" href="/css/telerik.common.min.css" />
        
        <link rel="stylesheet" href="/css/telerik.webblue.min.css" />
        <script language="javascript" type="text/jscript" src="/shared/mvc/javascript/kendo.web.min.js"></script>
        <script language="javascript" type="text/jscript" src="/shared/mvc/javascript/kendo.aspnetmvc.min.js"></script>
        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript">
            function onClicking(itemText) {
                var window = $("#window").data("kendoWindow");
     
                switch (itemText) {
                    case "Change Password":
                        window.refresh({ url: "/shared/pop/ChangePassword.aspx" }).title(itemText);
                        break;
                    case "Contact Us":
                        window.refresh({ url: "/shared/pop/Contact.aspx" }).title(itemText);;
                        break;
                    case "Help":
                        window.refresh({ url: "/shared/pop/Help.aspx" }).title(itemText);;
                        break;
                }
                window.open().center();
            }
     
            function WinOnClose(e) {
                $("#window").data("kendoWindow").content("<span></span>");
            }
        </script>
    </head>
        <body>
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr style="vertical-align: top">
                    <td class="Top" align="left">
    @(Html.Kendo().Window()
        .Name("window")
        .Draggable()
        .Resizable()
        .Width(600)
        .Height(600)
        .Visible(false)
        .Actions(actions => actions.Pin().Minimize().Maximize().Close())
        .Modal(true)
        .Iframe(true)
        .Events(ev => ev.Close("WinOnClose"))
    )
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr style="vertical-align: top">
                                <td style="width: 10px;">
                                      
                                </td>
                                <td align="left" class="Logo">
                                    <asp:hyperlink id="hlLogo" runat="server" target="_blank" navigateurl="http://www.AtlasReo.com"
                                                   tooltip="Atlas Reo Services">
                                        <asp:Image ID="imgLogoSpacer" runat="server" ImageUrl="~/Images/spacer.gif" Width="90px"
                                                   Height="80px" /></asp:hyperlink>
                                </td>
                                <td align="center" style="width: 100%">
                                    <div style="width: 510px; padding-top: 18px; text-align: justify; font-style: italic;
                                                                                                                                                                                                                                                                                                              font-weight: bold; font-size: 8pt; font-family: arial">
                                        Our mission is to provide unparalleled performance while always maintaining the
                                        highest level of integrity and professionalism. We focus on employing the best people,
                                        implementing proven processes and partnering with exceptional vendors to meet our
                                        client's needs.
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr style="vertical-align: top">
                    <td class="TopNavBar">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td>
                                                @( Html.Kendo().Menu()
                                                       .Name("Menu")
                                                       .Items(items =>
                                                           {
                                                               items.Add().Text("Home").Url("~/Default.aspx");
                                                               items.Add().Text("Messages").Url("~/Message");
                                                               items.Add().Text("Profile").Url("~/Vendor/");
                                                               items.Add().Text("Change Password").LinkHtmlAttributes(new { onclick = "onClicking  ('Change Password');" }).Url("");
                                                               items.Add().Text("Help").LinkHtmlAttributes(new { onclick = "onClicking  ('Help');" });
                                                               items.Add().Text("Contact Us").LinkHtmlAttributes(new { onclick = "onClicking  ('Contact Us');" });
                                                           })
                                                      )
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td align="right">
                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr style="vertical-align: middle">
                                            <td class="TopNavTDNoBorder">
                                                Logged in as: @ViewBag.MasterModel.UserFirstName
                                            </td>
                                            <td class="TopNavTDNoBorder">
                                                <a href="@Url.Action("Logout", "Application")">
                                                    <img src="~/images/button/btn_logout_01.gif" />
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr style="vertical-align: top">
                    <td>
                        <table class="MainContent" cellpadding="0" cellspacing="0" border="0">
                            <tr style="vertical-align: top">
                                <td style="padding-top: 5px; width: 1px;">
                                    <asp:image id="imgSpacer" runat="server" imageurl="~/Images/Spacer.gif" height="450px"
                                               width="1px" alternatetext="" />
                                </td>
                                <td>
                                    <div>
                                        @RenderBody()
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </body>
    </html>
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 Sep 2013 Link to this post

    Hello,

    You could also use the select event if you need to execute some logic when an item is clicked.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Louis
    Louis avatar
    24 posts
    Member since:
    Oct 2010

    Posted 27 Sep 2013 Link to this post

    I just ran into this.  I'm not using the MVC wrappers though.

    I decided to use jQuery to add the 'target' attribute after building the Menu in javascript:
    // Add target attribute to open in new window
    $(this).find(".k-link").attr("target", "_blank");

    As a side note.. Telerik, I LOVE you guys and one of the reasons I do like your stuff so much is the documentation.  But the documentation for the Kendo Menu, in particular, is very frustrating.  I know you guys can do better.

  7. Mike
    Mike avatar
    1 posts
    Member since:
    Aug 2012

    Posted 24 Jan 2014 Link to this post

    I'm trying to do something similar. I'm using the Kendo UI Web (no wrapper), and am trying to open external links in a new window. The code below worked (at first I thought it didn't).  Thanks Louis!   Please let me know where can I find the documentation (properties, acceptable values, etc.) for the json object for the menu?  

    ("#menu").kendoMenu({
            select: function (e) {
                var klink = $(e.item).find(".k-link");
                if (klink.attr("href").indexOf("http") >= 0)
                    klink.attr("target", "_blank");
    ...
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 Jan 2014 Link to this post

    Hi Michael,

    You can find more information in our Kendo Menu API documentation.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gregory
    Gregory avatar
    9 posts
    Member since:
    May 2011

    Posted 16 Jun 2014 Link to this post

    I know this is old, but for those who are still looking on how to open a menu item in a new window, you can add the
    .LinkHtmlAttributes(new {target = "blank"}) to your menu item and viola.
  10. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 17 Jun 2014 in reply to Louis Link to this post

    I agree, this seems a bit lacking in how customizable this is, or maybe there's more options that aren't documented?

    My menu is bound to a data source, pulled from a web service.  Some of the links in my menu are defined as opening in a new window, some are not.  I can't find any way to get in and do this without hijacking the select event and trying to popup a new window (which is way less supported than an anchor tag with _blank).

    I stumbled across some posts about using linkHtmlAttributes in the wrapper frameworks, but can't see how I can add html attributes to each link in the JS API.  I'm hoping I'm just missing something, this seems like it should be a lot easier than this?
  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Jun 2014 Link to this post

    Hello Kevin,

    Indeed, there is another undocumented way to add items - by just passing a string with LI element/elements to the append methods or the dataSource config options - we don't advertize it, as writing the HTML structure by hand is prone to errors. You can place an anchor with the target directly inside the LI element. Check this demo how you can use it.

    Regards,
    Kamen Bundev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 19 Jun 2014 in reply to Kamen Bundev Link to this post

    Excellent! 

    That's exactly what I was hoping for, injecting our own HTML as a last resort really opens up the possibilities.

    Thanks
  13. Aaron
    Aaron avatar
    20 posts
    Member since:
    Jan 2015

    Posted 15 Jan in reply to Gregory Link to this post

    THANK YOU Gregory!  Nice to have a functional response readily available.
  14. Gregory
    Gregory avatar
    9 posts
    Member since:
    May 2011

    Posted 15 Jan in reply to Aaron Link to this post

    most welcome :)
Back to Top
Kendo UI is VS 2017 Ready