Load PartialView on Menu Item Click

[Keziah]

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

[Peter Milchev]

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

[Keziah]

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.