16 Answers, 1 is accepted
0
Atlas
Top achievements
Rank 1
Rank 1
answered on 16 Sep 2013, 06:13 PM
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.
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.
0
Atlas
Top achievements
Rank 1
Rank 1
answered on 17 Sep 2013, 12:27 AM
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>0
Hello,
Daniel
Telerik
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!
0
Louis
Top achievements
Rank 1
Rank 1
answered on 27 Sep 2013, 06:50 AM
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:
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.
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.
0
Mike
Top achievements
Rank 1
Rank 1
answered on 24 Jan 2014, 09:08 PM
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");
...
("#menu").kendoMenu({
select: function (e) {
var klink = $(e.item).find(".k-link");
if (klink.attr("href").indexOf("http") >= 0)
klink.attr("target", "_blank");
...
0
Hi Michael,
You can find more information in our Kendo Menu API documentation.
Regards,
Kamen Bundev
Telerik
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!
1
Gregory
Top achievements
Rank 1
Rank 1
answered on 16 Jun 2014, 04:26 PM
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.
.LinkHtmlAttributes(new {target = "blank"}) to your menu item and viola.
Chris
commented on 25 Jan 2023, 05:17 AM
Top achievements
Rank 1
Iron
Rank 1
Iron
Great suggestion Gregory.
You'll want to change it to use "_blank" for each menu item that you want to open in a new tab.
0
Kevin Kembel
Top achievements
Rank 1
Rank 1
answered on 17 Jun 2014, 08:02 PM
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?
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?
0
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
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!
0
Kevin Kembel
Top achievements
Rank 1
Rank 1
answered on 19 Jun 2014, 03:25 PM
Excellent!
That's exactly what I was hoping for, injecting our own HTML as a last resort really opens up the possibilities.
Thanks
That's exactly what I was hoping for, injecting our own HTML as a last resort really opens up the possibilities.
Thanks
0
Aaron
Top achievements
Rank 1
Rank 1
answered on 15 Jan 2016, 05:33 PM
THANK YOU Gregory! Nice to have a functional response readily available.
0
Gregory
Top achievements
Rank 1
Rank 1
answered on 15 Jan 2016, 06:32 PM
most welcome :)
0
jay taylor
Top achievements
Rank 1
Rank 1
answered on 16 Jun 2018, 08:31 PM
Perfect. I didn't see this stuff in the documentation. Thanks.
0
Christos
Top achievements
Rank 1
Rank 1
answered on 23 Jun 2018, 03:15 AM
Gregory's solution did it.
0
Jamie
Top achievements
Rank 1
Rank 1
answered on 06 May 2019, 04:26 PM
The issue that I have with the example here, is that once I click on the 2nd menu item of the 2nd menu and a new page opens, the menu doesn't close. I want my menus to close when a link is clicked and the user has a new tab opened via a link.
0
Hello Jamie,
You could try subscribing to the Menu's select event and then close all items if the clicked item contains a link:
Here is a Dojo example where the above approach is demonstrated.
Regards,
Dimitar
Progress Telerik
You could try subscribing to the Menu's select event and then close all items if the clicked item contains a link:
<script> $(document).ready(function() { $("#menu").kendoMenu({ select: function(e) { var isLink = $(e.item).find("a").length > 0; if(isLink) { e.sender.close(".k-menu .k-item"); } } }); });</script>Here is a Dojo example where the above approach is demonstrated.
Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.