[Solved] How to make 3 levels binding menu?

[Juan Pablo Perez]

I'm trying to make a 3 levels binding menu. I'm working with MVC3 RC2 and Telerik 2010.3.1110.235.
Here is the model:

using System.Collections.Generic;

namespace TelerikMvc3Application.Models
{
    public class ViewModelOptions
    {
        public List<Option> Options { get; set; }
        public List<Option> Level2Options { get; set; }
        public List<Option> Level3Options { get; set; }
    }
    public class Option
    {
        public string Description { get; set; }
        public string Url { get; set; }
        public string ImageUrl { get; set; }
        public string Code { get; set; }
        public string OptionCode { get; set; }
    }
}

Here is the controller:

using System.Collections.Generic;
using System.Web.Mvc;
using TelerikMvc3Application.Models;

namespace TelerikMvc3Application.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult MainMenu()
        {
            var viewModelOptions = new ViewModelOptions
                                       {
                                           Options = new List<Option>
                                                         {
                                                             new Option {Description = "Option1", Url=@"\Home\Index"},
                                                             new Option {Description = "Option2", Url=@"\Home\Index"},
                                                             new Option {Description = "Option3", Url=@"\Home\Index"},
                                                             new Option {Description = "Option4", Url=@"\Home\Index"},
                                                             new Option {Description = "Option5", Url=@"\Home\Index"}
                                                         },
                                           Level2Options = new List<Option>
                                                               {
                                                                   new Option {Description ="Option11",OptionCode ="Option1", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option12",OptionCode ="Option1", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option21",OptionCode ="Option2", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option22",OptionCode ="Option2", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option31",OptionCode ="Option3", Url=@"\Home\Index"},

                                                               },
                                           Level3Options = new List<Option>
                                                               {
                                                                   new Option {Description ="Option111",OptionCode ="Option11", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option112",OptionCode ="Option11", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option113",OptionCode ="Option11", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option121",OptionCode ="Option12", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option121",OptionCode ="Option12", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option211",OptionCode ="Option21", Url=@"\Home\Index"},
                                                                   new Option {Description ="Option212",OptionCode ="Option21", Url=@"\Home\Index"},
                                                               }
                                       };
            return PartialView(viewModelOptions);
        }
    }
}

And here is the View:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TelerikMvc3Application.Models.ViewModelOptions>" %>
<%@ Import Namespace="TelerikMvc3Application.Models" %>
<%= Html.Telerik().Menu()
        .Name("MainMenu")
        .BindTo(Model.Options, mapping => mapping
            .For<Option>(binding => binding
               .ItemDataBound((item, o) =>
                {
                    item.Visible = true;
                    if (o.Url != null)
                        item.Url = o.Url;
                    if (o.ImageUrl != null)
                        item.ImageUrl = o.ImageUrl;
                    if (o.Description != null)
                        item.Text = o.Description;
                })
                .Children(c => Model.Level2Options.Where(f => f.OptionCode==c.Description))
            )
                    .For<Option>(binding => binding
                    .ItemDataBound((item, l2) =>
                    {
                        item.Visible = true;
                        if (l2.Url!=null)
                            item.Url = l2.Url;
                        if (l2.ImageUrl != null)
                            item.ImageUrl = l2.ImageUrl;
                        if (l2.Description != null)
                            item.Text = l2.Description;
                    })
                    .Children(c => Model.Level3Options.Where(f => f.OptionCode == c.Description))
                )
                    .For<Option>(binding => binding
                    .ItemDataBound((item, l3) =>
                    {
                        item.Visible = true;
                        if (l3.Url != null)
                            item.Url = l3.Url;
                        if (l3.ImageUrl != null)
                            item.ImageUrl = l3.ImageUrl;
                        if (l3.Description != null)
                            item.Text = l3.Description;
                    })
                    .Children(c => null)
                )

        )
%>

Level 2 works properly but Level 3 does not appear. 

I include the project, based on a project posted by Telerik in another thread.

Can anybody tell me what I'm doing wrong?

Thanks in advance.

Juan Pablo Pérez

[Juan Pablo Perez]

Please, I need to know if it is possible to use Telerink binding menu with 3 levels.

¿Can anybody tell me what I'm doing wrong with the example I sent?

Thank you very much.

Juan Pablo Perez

[Atanas Korchev]

Hello Juan Pablo Perez,

 The approach you are currently using is not supported. As you see you have three bindings for the same type  - Option. Only one of those binding configurations is actually taken into consideration.

What will work is to change your model a bit to be hierarchical. The treeview drag and drop example shows a similar setup with hierarchical model - the Northwind Customer object. The same approach will work with the menu.

If you don't want to change your model you can avoid using BindTo altogether. Use three nested foreach statements to populate the items.

All the best,
Atanas Korchev
the Telerik team

[Juan Pablo Perez]

Thank you Atanas,

I've changed the model to use a different class in each level and now it works.

I include the project updated in order to help anyone with the same problem.

Juan Pablo Perez

[Lucious]

Hi Pablo,

I am still struggling to get this menu working and in my case i want the hierarchical menu that is 4/5 levels or unlimitted levels if possible.

Would you please post the code for me or at least tell me what you have changed to make your code work?

I was following your example and it only showed first level.

i will appreciate if you respond sooner.

thanks
Lucio