Multi Level Menu with Binding

[quentinjs]

In the help, there is an example:

<% 
   Html.Telerik().Menu()
       .Name("Menu")
       .SelectedIndex(2)
       .BindTo(Model,(item, navigationData) => 
       {
           item.Text = navigationData.Text;
           item.ImageUrl = navigationData.ImageUrl;
           item.ImageHtmlAttributes.Add("style", "margin-right: 10px");
           item.Url = navigationData.Url;
       })
      .Render();
%>

If the Model contained only a list of naviagionData objects then this is great, makes a fantastic single level menu. 

What if the navigationData object contained a property like SubMenu which was another IEnumerator list of naviagationData.  If this was not null, then theoretically the menu could be N deep. 

How would you handle this?

[Atanas Korchev]

Hello quentinjs,

At the time being we don't support hierarchical databinding.
We are still looking for the best way to implement that feature and would appreciate your feedback.
First there should be some way to specify the children and then a mapping action to set the properties.
I was thinking of something like this:

Html.Telerik().Menu().
        .Name("Menu")
        .BindTo(Model, o => o.Children, (item, o) =>
         {
               item.Text = o.Text;
         });

This approach will work well for homogeneous collections - where the parent and the child are from the same type. However it will not work well with heterogeneous collections - for example Customer -> Orders.

What do you think?
 
Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[quentinjs]

I can see the problem with the non heterogeneous classes.  My first problem is actually a heterogeneous one as I just want a multi-level category list. 

Either it could be done by requiring the classes to inherit from a base class (could be problematic asI use LLBL for my model), or using of injection or interfaces perhaps? 

[Skywalker]

What about populating some sort of Menu class model, instead of setting up an XmlSiteMap (which I have to do now if I want to avoid recursive methods in my view)?

This way the Telerik Menu would know how to bind recursively, just as it knows how to bind to a XmlSiteMap.

It's almost the same as it is done in WebForms, where one could recursively add MenuItems to a RadMenu from the codebehind.
In MVC, the controller (or a custom ActionFilterAttribute) is responsible for creating the proper view model for the menu.

[Georgi Krustev]

Hello,

Currently we decided to support hetero-gene collection using declarative mapping. Here is an example of the panelbar:

<%= Html.Telerik().PanelBar()
   .Name("PanelBar3")
   .ExpandMode(PanelBarExpandMode.Single)
   .BindTo(Model, mapping => mapping
       .For<MvcApplication1.Models.Customer>(binding => binding
          .Children(c => c.Orders.Take(20))
          .ItemDataBound((item, c) => item.Text = c.CompanyName))
       .For<MvcApplication1.Models.Order>(binding => binding
          .Children(o => null)
          .ItemDataBound((item, o) => item.Text = o.OrderDate.ToString()))
     )
   %>

Note that you should declare what should be the correct actions for each object, which hetero-gene collection contains.

For your convenience I have attached a test project using this feature. Please review it and let us know what your feedback is.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Skywalker]

Cool, I like that!
For a fixed hierarchy depth, I see that this works great.
However it does not solve the issue with hierarchical binding (although that an easily be overcome by dynamically generating a XmlSiteMap).

Thanks for the demo, it's helpful!

[hedayat]

I am going to generate dynamic SiteMap from Database, but how can i Bind Telerik Menu to SiteMapProvider?

I there any example about  using Dynamic SiteMapProvider  in the Telerik Menu...

 

[Georgi Krustev]

Hello,

If I understand you right, you need to create SiteMap which will be populated with data read from DB. If my assumption is correct, you will need to create XmlSiteMap object and add SiteMapNodes to it in order to create the hierarchical collection. Here is a link which shows how to use SiteMap to bind Navigatable control.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[cheekl]

Is it possible to bind the dataset to the Menu just like how we did it for Web form RadMenu?
If not, can you share with me the alternative solution to dynamically create multi level menu?