Load PartialView on Menu Item Click

3 posts, 1 answers
  1. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 08 Jul Link to this post

    Hi

    I have the menu below which is dynamically created from the database. It shows Category and their respective SubCategories. I also have the url that it needs to navigate to stored in the database. How can I load the relevant url when the user clicks on a menu item?

     

    The code for my menu is:

    @(Html.Kendo().Menu()
                      .Name("Menu")
                      .BindTo(Model.categories, mappings =>
                      {
                          mappings.For<PhytClean.Models.DB.Category>(
                                                                      binding => binding.ItemDataBound((item, category) =>
                                                                      {
                                                                          item.Text = category.CategoryName;
                                                                      }).Children(category => category.SubCategories)
                                                                    );
                          mappings.For<PhytClean.Models.DB.SubCategory>(binding => binding.ItemDataBound((item, subCategory) =>
                                  {
                                      item.Text = subCategory.SubCategoryName;
                                  }));
                      })
                    )

     

    I tried using the following to see if it would get me the URL field from that database entity but it returns "undefined"

     <script type="text/javascript">
            $(function () {
                $("#Menu").kendoMenu({
                    select: function (e) {
                        var url = $(e.item).find(".k-link").attr("URL");            
                    }
                });
            });
           
        </script>

     

    Any assistance would be appreciated.

     

    Thanks

  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    139 posts

    Posted 12 Jul Link to this post

    Hello,

    To achieve the desired result you could set the item's Url property in the .ItemDataBound event handler and get the "href" attribute in the Select event handler. Here is the modified Menu declaration:

    @(Html.Kendo().Menu()
            .Name("Menu")
            .Events(ev => ev.Select("select"))
            .BindTo(Model.categories, mappings =>
            {
                mappings.For<PhytClean.Models.DB.Category>(
                        binding => binding.ItemDataBound((item, category) =>
                        {
                            item.Text = category.CategoryName;
                            item.Url = category.Url;
                        }).Children(category => category.SubCategories)
                    );
     
                mappings.For<PhytClean.Models.DB.SubCategory>(binding => binding.ItemDataBound((item, subCategory) =>
                {
                    item.Text = subCategory.SubCategoryName;
                    item.Url = category.Url;
                }));
            })
    )
    <script>
        function select(sender) {
            var url = $(sender.item).find(".k-link").attr("href");
            sender.preventDefault(); // used to stop the navigation to the url
        }
    </script>

    I hope this helps solving your case.

    Regards,
    Peter Milchev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 12 Jul in reply to Peter Milchev Link to this post

    Hi Peter
    Thanks so much. That was exactly what I wanted. I wanted it to navigate to the url so I just removed the preventDefault method.

    Thanks again.
Back to Top