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
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
9 Answers, 1 is accepted
0
Hello Anamika,
Alex Gyoshev
Telerik
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")
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anamika
Top achievements
Rank 1
answered on 08 Oct 2014, 11:19 AM
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
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
0
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 GyoshevTelerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anamika
Top achievements
Rank 1
answered on 09 Oct 2014, 07:50 AM
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
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
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anamika
Top achievements
Rank 1
answered on 09 Oct 2014, 08:27 AM
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 .
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 .
0
Hello Anamika,
I could not reproduce the problem in this Dojo snippet. How does it differ from your application?
Regards,
Alex Gyoshev
Telerik
I could not reproduce the problem in this Dojo snippet. How does it differ from your application?
Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anamika
Top achievements
Rank 1
answered on 13 Oct 2014, 06:34 AM
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?
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?
0
Anamika
Top achievements
Rank 1
answered on 13 Oct 2014, 11:29 AM
please ignore last post got it working