This is a migrated thread and some comments may be shown as answers.
RadMenu with multiple columns
1 Answer 54 Views
This is a migrated thread and some comments may be shown as answers.
AmrElsayed
Top achievements
Rank 1
AmrElsayed asked on 10 Jul 2011, 10:30 PM
Hello,

We are using the RadMenu control with the SiteMapDataSource to display the navigation of our website, we need to use a multiple columns drop down menu when then number of subpages are greater than a predefined value.

i.e. if the predefined value is 4 for example, we are going to display one column drop down menu for the subpages number less than (or equal) 4, however if a page has 6 subpages for example, we have to display the first 4 columns in the first column then we have to break to the next column showing the next 2 subpages in the second column.

if we use the ItemDataBound event to specify the value of "RepeatedColumns" then the 6 subpages are going to be displayed in 2 columns; 3 subpages per column.

Is is available to implement the menu in this way?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 14 Jul 2011, 01:52 PM
Hi Amrelsayed,

Here is one possible workaround:
private DataTable CreateTestTable()
   {
       DataTable table = new DataTable();
       table.Columns.Add("ID");
       table.Columns.Add("ParentID");
       table.Columns.Add("Text");
 
       table.Rows.Add(new string[] { "1", null, "root 1" });
       table.Rows.Add(new string[] { "2", null, "root 2" });
       table.Rows.Add(new string[] { "3", "1", "child 1.1" });
       table.Rows.Add(new string[] { "4", "1", "child 1.2" });
       table.Rows.Add(new string[] { "5", "1", "child 1.3" });
       table.Rows.Add(new string[] { "6", "1", "child 1.4" });
       table.Rows.Add(new string[] { "7", "1", "child 1.5" });
       
       return table;
   }
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           RadMenu1.DataSource = CreateTestTable();
           //Establish hierarchy:   
           RadMenu1.DataFieldID = "ID";
           RadMenu1.DataFieldParentID = "ParentID";
           //Set Text, Value, and NavigateUrl:   
           RadMenu1.DataTextField = "Text";
           RadMenu1.DataValueField = "ID";
 
           RadMenu1.DataBind();
       }
 
   }
   private const int MAXIMUM_ITEMS_IN_A_COLUMN = 4;
   protected void RadMenu1_DataBound(object sender, EventArgs e)
   {      
       foreach (RadMenuItem item in RadMenu1.Items)
       {
           int numberOfAdditionalDummyItems = MAXIMUM_ITEMS_IN_A_COLUMN - item.Items.Count % MAXIMUM_ITEMS_IN_A_COLUMN;
           for (int i = 0; i < numberOfAdditionalDummyItems; i++)
           {
               item.Items.Add(new RadMenuItem() { IsSeparator = true, Visible = false });
           }
 
           item.GroupSettings.RepeatColumns = (int)(item.Items.Count / MAXIMUM_ITEMS_IN_A_COLUMN);
       }
   }

The idea is to add dummy separator items with Visible = false to allow you to control the number of items in a column.  


Regards,
Peter
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Tags
Menu
Asked by
AmrElsayed
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or