This is a migrated thread and some comments may be shown as answers.

Load PartialView on Menu Item Click

2 Answers 172 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Keziah
Top achievements
Rank 1
Keziah asked on 08 Jul 2016, 04:08 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 12 Jul 2016, 08:33 AM
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
0
Keziah
Top achievements
Rank 1
answered on 12 Jul 2016, 12:09 PM
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.
Tags
Menu
Asked by
Keziah
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Keziah
Top achievements
Rank 1
Share this question
or