RadMenu with multiple columns

[AmrElsayed]

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.

[Peter]

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