Pre-select menu item on load

[Anamika]

Hello ,

I have kendo menu with items having text and image. I would like to show the menu selected on document load  and am using this jquery but with no success. Is there a way to select menu item by text and fire selected event?

$("#navigationMenu").find("#" + text).addClass("k-state-selected");

Anamika

[Alex Gyoshev]

Hello Anamika,

You can find an item by text with the following code:

    var links = $("[data-role=menu]").find(".k-link");
    var matchingLink = $.grep(links, function(x) {
       return $.trim($(x).text()) == "Events";
    });
    $(matchingLink).addClass("k-state-selected")

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

Hello Alex,

While waiting i started using id for menu items and using this code to pre select the menu

 $("#menuImages").find("#" + id).addClass("k-state-selected");
But this does not invoke menu select event. So how can i trigger the selected event for the menu item as well.

Thanks

Anamika

[Alex Gyoshev]

Hello Anamika,

You need to trigger it manually, since you are modifying the underlying HTML -- you can trigger it via this code:

var item = $("#menuImages").find("#" + id).
$("#menuImages").data("kendoMenu").trigger("select", { item: item[0] });

Regards,

Alex Gyoshev

Telerik

 

 

 

[Anamika]

Hello Alex,

the select trigger doe not work. the moment i put this 2 lines of code in document ready the page gives error. Not sure what is the problem. My kendo menu has no sub items and menu code is like this
 @(Html.Kendo().Menu()
          .Name("menuImages")
          .Items(items =>
          {
              items.Add().Text("View Archives").HtmlAttributes(new { id="1"})
                   .ImageUrl(Url.Content("~/Images/Refresh.png"));

              items.Add().Text("Objekte Aktuelles Jahr").HtmlAttributes(new { id = "2" })
                   .ImageUrl(Url.Content("~/Images/AktiveAufträge.png"));

              items.Add().Text("Nur Archierviert Objekte").HtmlAttributes(new { id = "3" })
                   .ImageUrl(Url.Content("~/Images/ArchivWahl.png"));

              items.Add().Text("Aktive Objekte").HtmlAttributes(new { id = "4" })
                   .ImageUrl(Url.Content("~/Images/AktiveAufträge.png"));
          })
           .Events(e => e.Select("Archiveselect"))

    )

and in document ready
 $("#menuImages").find("#" + id).addClass("k-state-selected");
lines works fine but when i add select trigger errors out

Anamika

[Alex Gyoshev]

Hello Anamika,

I believe there is a subtle error in the snippet I posted -- the first line ends with a dot. Changing it to a semicolon will work.

var item = $("#menuImages").find("#" + id);
$("#menuImages").data("kendoMenu").trigger("select", { item: item[0] });

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

no i had changed that as well, but even with ; that does not work
var id =2;
        $("#menuImages").find("#" + id).addClass("k-state-selected");
        var item = $("#menuImages").find("#" + id);
        $("#menuImages").data("kendoMenu").trigger("select", { item: item[0] });
the moment i put last 2 lines for selection the page looks distorted .

[Alex Gyoshev]

Hello Anamika,

I could not reproduce the problem in this Dojo snippet. How does it differ from your application?

Regards,
Alex Gyoshev
Telerik

 

 

[Anamika]

Hello Alex,

looks like the code inside my menu select event is what causing problem.
In menu select event i want to deselect the last menu item and select the current.
 function Archiveselect(e) { 

 this.element.find(".k-state-selected").removeClass("k-state-selected");
        $(e.item).addClass("k-state-selected");
}
Am i doing something wrong here?

[Anamika]

please ignore last post got it working