Pre-select menu item on load

10 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 06 Oct 2014 Link to this post

    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
  2.
  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 08 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 08 Oct 2014 in reply to Alex Gyoshev Link to this post

    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
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 Oct 2014 Link to this post

    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

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

     

  8.
  9. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 09 Oct 2014 in reply to Alex Gyoshev Link to this post

    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
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 09 Oct 2014 in reply to Alex Gyoshev Link to this post

    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 .
  14.
  15. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 10 Oct 2014 Link to this post

    Hello Anamika,

    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!
     
  17. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 13 Oct 2014 in reply to Alex Gyoshev Link to this post

    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?
  19. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 13 Oct 2014 in reply to Anamika Link to this post

    please ignore last post got it working
  20.
Back to Top