MultiColumn Menu in a Single MenuItem

[Vinoth K]

Hi,

I am in need of creating a Menu Using RADMenu control.
Here is the issue which made me stuck.

I am retrieving the menuitems from a XML and binding it to the RADMenu. It works fine.
But I am in need of having a multicolumn menuitem.
The Multi column menuitem should not repeat for all menuitem. It should be available in only one menuitem.

I found a MultiColumn demo in http://demos.telerik.com/aspnet-ajax/menu/examples/multicolumnmenu/defaultcs.aspx
But that demo is applying the settings for all the menuitems in the menu. How can I restrict to a single menuitem using XML.

Kindly let me know how this can be achieved. Refer attachment for more details,

[Vinoth K]

SOME ONE KINDLY REPLY ASAP AS THIS IS A URGENT REQUIREMENT.

Thanks,
Vinoth.K

[Yana]

Hello Vinoth K,

You can set GroupSettings-RepeatColumns property separately for each item, in XML format it will look like this:

<?xml version="1.0" encoding="utf-16"?>
<Menu>
  <Group>
    <Item Text="Root RadMenuItem1">
      <Group RepeatColumns="2">
        <Item Text="Child RadMenuItem 1" />
        <Item Text="Child RadMenuItem 2" />
        <Item Text="Child RadMenuItem 3" />
        <Item Text="Child RadMenuItem 4" />
      </Group>
    </Item>
    <Item Text="Root RadMenuItem2">
      <Group>
        <Item Text="Child RadMenuItem 1" />
        <Item Text="Child RadMenuItem 2" />
        <Item Text="Child RadMenuItem 3" />
        <Item Text="Child RadMenuItem 4" />
      </Group>
    </Item>
  </Group>
</Menu>

Best regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vinoth K]

Hi Yana,

Thanks for the reply. That really saved my time.

I have another question. My requirement is to have a submenu within the submenu.

The inner submenu should be shown as shown in the above figure under MenuItem 2, Where "SubMenu23", "SubMenu24" are the Inner submenu of the subMenu "SubMenu22".

How can i achieve it. Is there any direct way of doing that.

Kindly reply ASAP. This is very urgent.

Thanks,
Vinoth

[Vinoth K]

Hi,

I am in need of a small help.
Now Multicolumn is available in the RadMenu. I need to have border to the SubMenu.
When I apply border to the .rmMulticolumn Cssclass, the Multicolumn is changed to a single column.
I think I cannot apply border style to the Submenu directly. Is there any Workaround to achieve this.

Kindly reply.

Thanks and Regards,
Vinoth

[Yana]

Hello Vinoth,

I've attached a simple page demonstrating how to fulfill both requirements, please download it and give it a try.

Kind regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vinoth K]

Hi Yana,

Thanks for the reply.
The code you provided doesnt work and produces the same issue as reported.
Now my issue is only Border. I somehow fixed the Child element issue reported above.
But the border is not getting applied. If I apply your code for border, the Multicolumn turns to be a Single column.
Find the screenshot below.

Kindly suggest someother possibilities, if applicable.

Thanks
Vinoth.K

[Yana]

Hello Vinoth K,

It seems that the border affects some other css styles. Could you please send us a live url where we can observe the issue?

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Neha]

Hello,

I have a similar requirement but in the radsitemap. I want to show the first parent node and its child with repeat columns as 2 while for the rest of the parent root nodes and its child I want the reapeat columns as 1. I am binding the datasouce of the sitemap to a datatable.

 

 

            DataTable dtTable = new DataTable();
            DataRow dtRow;

            dtTable.Columns.Add("ID", System.Type.GetType("System.Int32"));
            dtTable.Columns.Add("Title", System.Type.GetType("System.String"));
            dtTable.Columns.Add("URL", System.Type.GetType("System.String"));
            dtTable.Columns.Add("ParentID", System.Type.GetType("System.Int32"));
            dtTable.Columns.Add("ColumnHeader", typeof(bool));

            dtTable.TableName = "SiteMap";
            dtRow = dtTable.NewRow();
            dtRow["ID"] = 1;
            dtRow["Title"] = "Business Technology Services";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = System.DBNull.Value;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 2;
            dtRow["Title"] = "BUSINESS NEEDS";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = 1;
            dtRow["ColumnHeader"] = true;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 3;
            dtRow["Title"] = "SERVICES";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = 1;
            dtRow["ColumnHeader"] = true;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 4;
            dtRow["Title"] = "Optimize Operations";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 2;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 15;
            dtRow["Title"] = "Transform Business";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 2;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 5;
            dtRow["Title"] = "Information Management and Collaboration";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 3;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 6;
            dtRow["Title"] = "Innovative Approach";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = System.DBNull.Value;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 7;
            dtRow["Title"] = "Working With Us";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 6;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 8;
            dtRow["Title"] = "About Avanade";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = System.DBNull.Value;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 9;
            dtRow["Title"] = "Inside Avanade";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 8;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 10;
            dtRow["Title"] = "News & Information";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 8;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 11;
            dtRow["Title"] = "In the News";
            dtRow["URL"] = "http://google.com";
            dtRow["ColumnHeader"] = false;
            dtRow["ParentID"] = 10;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 12;
            dtRow["Title"] = "Press Releases";
            dtRow["URL"] = "http://google.com";
            dtRow["ColumnHeader"] = false;
            dtRow["ParentID"] = 10;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 13;
            dtRow["Title"] = "Events";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 8;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 14;
            dtRow["Title"] = "Leadership";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 8;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 16;
            dtRow["Title"] = "Campaigns";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = System.DBNull.Value;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 17;
            dtRow["Title"] = "Campaign 1";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 16;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 18;
            dtRow["Title"] = "Campaign 2";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 16;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 19;
            dtRow["Title"] = "Related Websites";
            dtRow["URL"] = System.DBNull.Value;
            dtRow["ParentID"] = System.DBNull.Value;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 20;
            dtRow["Title"] = "The Cloud Advantage";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 19;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            dtRow = dtTable.NewRow();
            dtRow["ID"] = 21;
            dtRow["Title"] = "The Avanade Story";
            dtRow["URL"] = "http://google.com";
            dtRow["ParentID"] = 19;
            dtRow["ColumnHeader"] = false;
            dtTable.Rows.Add(dtRow);

            siteMap.MaxDataBindDepth = 5;

            siteMap.DataSource = dtTable;
            siteMap.DataFieldID = "ID";

            siteMap.DataFieldParentID = "ParentID";
            siteMap.DataTextField = "Title";
            siteMap.DataValueField = "ColumnHeader";
            siteMap.DataNavigateUrlField = "URL";         
            siteMap.DataBind();      

 

 

 

Can anyone tell me how I can do this. Please find attcahed on how we want the site map to look.

This requirement is very urgent.

Thanks and Regards,
Neha Chaturvedi

 

 

 

[Kate]

Hello Neha,

Please take a look at this example here. It shows how you can set the different number of columns at the different levels.

All the best,
Kate
the Telerik team