RadMenu :: Am I able to apply RepeatColumns to a single element based on its size?

4 posts, 0 answers
  1. Nick
    Nick avatar
    17 posts
    Member since:
    Feb 2011

    Posted 28 Aug 2014 Link to this post

    01.<telerik:RadMenu runat="server" Skin="Menu_New" ID="RadMainMenu" Style="z-index: 5" ExpandDelay="1000"
    02.    DataSourceID="SqlDataSourceMainMenu" DataFieldID="Id" DataFieldParentID="ParentId" DataTextField="Text"
    03.    EnableRoundedCorners="true" EnableEmbeddedSkins="false" EnableShadows="true"
    04.    OnItemDataBound="RadMainMenu_ItemDataBound" OnItemClick="RadMainMenu_ItemClick">
    05. 
    06.    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    07. 
    08.    <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Horizontal" />
    09. 
    10.</telerik:RadMenu>

    I added the "DefaultGroupSettings" line and yes, every menu option was now a 3 bar menu. However, I need to be able to apply this to the menu options that actually have more than  "x" items in them.


    Any help with this would be greatly appreciated.


    Thanks,
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 01 Sep 2014 Link to this post

    Hi Nick,

    The property RepeatColumns can be set dynamically on server side according to number of items. You can look for items which have three or more child items and then set to such items the property RepeatColumns as the following
    C#:
    foreach (RadMenuItem item in  menu1.Items)
    {
        int itemsCount = (item as RadMenuItem).Items.Count;
        int maxItemInRow = 3;
     
        if (itemsCount > maxItemInRow)
        {
            item.GroupSettings.RepeatColumns = 3;
        }
    }

     Please, find a sample solution in the attachment.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    17 posts
    Member since:
    Feb 2011

    Posted 10 Sep 2014 in reply to Magdalena Link to this post

    That worked, ty! One other question on this topic, I'm very new to Telerik so I'm learning as I go. When a "control" is used (like this one for example) are there predefined classes/id's that are assigned to the elements?

    The reason I'm asking is because I'm trying to create a VERY specific menu design and while I was able to whip it out in css, I'm having a hard time understanding the telerik output to see if I can incorporate it.

    Here's what I'm trying to do (attached file)::

    I want submenu titles that could or could not be links, now I'd typically identify them during their creation (this time from a DB call) and assign an id/class to them to know, however, I'm not entirely sure I can do that with this control.

    Any help or direction on this would be great.

    Thank you!
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 16 Sep 2014 Link to this post

    Hello, NIck.

    You are on the right path -- with server binding you can pretty much assign any class name to radmenu items depending on the conditions you need.

    Examine the attached file. In it I am binding RadMenu to XML (for simplicity). The fields in the XML file correspond to fields RadMenuItems thus I am able to assign the a class name to a given node.

    Of course this can be done in many other ways: for instance you could use the mappings (DataBindings) to achieve similar results.

    Of course the above two require that you actually have the class name as a field be it in XML or as a field somewhere in the data object.

    Ultimately, you can use ItemDataBound event (http://www.telerik.com/help/aspnet-ajax/menu-server-side-item-data-bound.html). Apart from the item currently bind, you also have the data item so you have more options to set CssClass name.

    Regards,
    Ivan Zhekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top