CODEWITHSUNDEEP
kendo-ui
pfeds
pfeds

Reputation: 2273

Kendo UI / MVC - Getting a Menu item to open in a Tab page instead of calling Action, using onclick?

I have a Kendo UI menu:

 @(Html.Kendo().Menu()
                .Name("menu")
                .Items(menu =>
                {
                    menu.Add().Text("About").Action("Index", "Home");
}))

Instead of loading the new page with an Action I want to call a javascript function onclick. How can I do this? Should I use the HtmlAttributes property?

Additionally, I'm using the moonlight theme which has white menu item text for non-actions and orange text for action menu items. For my menu item which will call the javascript function how would I keep this as orange text? By setting a style, or is there another way?

My sample code is on http://www.eeedee.com if I haven't explained myself well enough.

Thanks

Upvotes: 1

Views: 8749

Answers (4)

Stuart Hallows
Stuart Hallows

Reputation: 8953

Slightly off topic, but for anyone looking to call an action method from the menu, but have the target page open in a new tab...

@(Html.Kendo().Menu()
.Name("menu")
.Items(menu =>
{
    menu.Add()
        .Text("About")
        .Action("Index", "Home")
        .LinkHtmlAttributes(new { target = "_blank" });
}))

Upvotes: 0

doglobster
doglobster

Reputation: 116

You can also use the "LinkHtmlAttributes" to, um, add attributes to the generated link:

@(Html.Kendo().Menu()
                .Name("menu")
                .Items(menu =>
                {
                    menu.Add()
                        .Text("About")
                        .Action("Index", "Home")
                        .LinkHtmlAttributes(new { id = "myLink", onclick = "return OnMyLinkClick();" });
                }))

Upvotes: 1

Hung Doan
Hung Doan

Reputation: 1167

You can work with andrewdudek84 answer(That way is really great).

There is two more solution (The hacking way):

Solution 1

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu =>
    {
        menu.Add().Text("About").Url("javascript:void(0)")
        .HtmlAttributes(new { 
            @class= "helloWorld"
        });
}))
<script>
$('.helloWorld').click(function(){
    //put your code here
});
</script>

Solution 2

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu =>
    {
        menu.Add().Text("About").Action("Index", "Home")
        .HtmlAttributes(new { 
            @class= "helloWorld"
        });
}))

<script>
$('.helloWorld').click(function(e){
    e.preventDefault(); // Cancel the default action of your click.
    //put your code here    
});
</script>

Upvotes: 3

andrewdudek84
andrewdudek84

Reputation: 181

I would suggest something like this:

<ul id="menu">
    <li id="menuItem1">Menu Item 1</li>
</ul>

<script type="text/javascript">
    $(document).ready(function() {
        $("#menu").kendoMenu({
            select: menuItemSelect,
            theme: "Moonlight"
        });
    });

    function menuItemSelect(e){
        alert(e.item.id);
    }
</script>

Upvotes: 1

Related Questions