Too many item displayed

[Jérémy]

Hi,

 I have a RadMenu populated with Items and many (more than 800) sub-items. like this :

ITEM 1 -> sub 1, sub 2, ...

ITEM 2 -> sub 1, sub 2, ...,

ITEM 3 -> sub 1, sub 2, ..., sub 400

ITEM 4 -> sub 1, sub 2, ..., sub 600

ITEM 5 -> sub 1, sub 2, ..., sub 800​​

But, when I try to open it, it display that message (in attach files). It append in Firefox but not in chrome.

Do you have a solution ​to display sub-element gradually on client side ?

Thank for helping

Regards

[Nencho]

Hello Vallin,

Can you demonstrate the implementation for the RadMenu that you have at your end and the databinding approach that you use. Thus, we could get a clearer picture on the settings that you have and suggest you a possible workaround for the experienced scripting issue.

Regards,
Nencho
Telerik

[Jérémy]

Hi,

You can see the demonstrate at this url => https://vid.me/nQQX

Here, the declaration of my RadMenu.

<telerik:RadMenu ID="RadPerimetre" runat="server" Skin="Silk" Width="120" EnableRoundedCorners="true" EnableShadows="true" EnableRootItemScroll="true" Flow="Vertical" DefaultGroupSettings-Height="300" CollapseAnimation-Type="None" RenderMode="Auto" OnClientItemClicking="DisableRootClick" OnInit="RadMenu_Init" OnItemClick="RadMenu_ItemClick" OnClientLoad="RefreshEtiquetteEnergetiqueTDB"> </telerik:RadMenu>

 

This is the method that i use for bind the RadMenu

private void AddNode(GeoNode node)
{
  RadMenuItem item = new RadMenuItem();
  item.Text = node.Libelle.ToUpper();
  item.Value = node.Id.ToString();
  item.Attributes["IdNiveau"] = ((int)node.Niveau).ToString();
  item.Attributes["Name"] = "child";
  RadPerimetre.Items.FindItemByValue(((int)node.Niveau).ToString()).Items.Add(item);
}

And the OnInit method

protected void RadMenu_Init(object sender, EventArgs e)
        {
            if (RadPerimetre.Items.Count == 0)
            {
                RadMenuItem itemBase = new RadMenuItem();
                itemBase.PostBack = false;
                itemBase.Attributes["Name"] = "origin";

                RadMenuItem groupeItem = itemBase.Clone();
                groupeItem.Value = sGroupeInt;
                RadPerimetre.Items.Insert(0, groupeItem);

                RadMenuItem nationItem = itemBase.Clone();
                nationItem.Value = sNationInt;
                RadPerimetre.Items.Insert(1, nationItem);

                RadMenuItem regionItem = itemBase.Clone();
                regionItem.Value = sRegionInt;
                RadPerimetre.Items.Insert(2, regionItem);

                RadMenuItem departementItem = itemBase.Clone();
                departementItem.Value = sDepartementInt;
                RadPerimetre.Items.Insert(3, departementItem);

                RadMenuItem villeItem = itemBase.Clone();
                villeItem.Value = sVilleInt;
                RadPerimetre.Items.Insert(4, villeItem);

                switch (ContextValues.modeGeo)
                {
                    case ModeGeo.Patrimoine:
                        RadMenuItem etablissementItem = itemBase.Clone();
                        etablissementItem.Value = sEtablissementInt;
                        RadPerimetre.Items.Insert(5, etablissementItem);

                        RadMenuItem batimentItem = itemBase.Clone();
                        batimentItem.Value = sBatimentInt;
                        RadPerimetre.Items.Insert(6, batimentItem);

                        RadMenuItem zoneItem = itemBase.Clone();
                        zoneItem.Value = sZoneInt;
                        RadPerimetre.Items.Insert(7, zoneItem);

                        break;
                    case ModeGeo.EclairagePublic:
                        RadMenuItem quartierItem = itemBase.Clone();
                        quartierItem.Value = sQuartierInt;
                        RadPerimetre.Items.Insert(5, quartierItem);

                        RadMenuItem PosteCommandeItem = itemBase.Clone();
                        PosteCommandeItem.Value = sPosteCommandeInt;
                        RadPerimetre.Items.Insert(6, PosteCommandeItem);

                        RadMenuItem ArmoireItem = itemBase.Clone();
                        ArmoireItem.Value = sArmoireInt;
                        RadPerimetre.Items.Insert(7, ArmoireItem);

                        break;
                    default: throw new ArgumentException("Ce module n'est pas géré: " + ContextValues.modeGeo.ToString());
                }
            }
        }

 

Thanks

[Ivan Danchev]

Hello Vallin,

I extracted your code to a sample page and replaced the missing dependencies with strings, but this did not result in the exception demonstrated in the video you linked. Could you please modify the page, for example you can use sample data to populate the Menu, try reproducing the exception and attach it back for further review?
We would recommend going through this blog post, which provides helpful tips on isolating an issue.

Regards,
Ivan Danchev
Telerik

[Jérémy]

Hi,

I started a new WebApplication project for testing it :​

WebForm.aspx

<telerik:RadMenu id="radMenu" runat="server" Skin="Silk" Width="120"​ EnableRoundedCorners="true" EnableShadows="true" EnableRootItemScroll="true" Flow="Vertical"​ DefaultGroupSettings-Height="300" CollapseAnimation-Type="None" RenderMode="Lightweight" ClickToOpen="true">
            <Items>
                <telerik:RadMenuItem Text="300 Items"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="600 Items"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="900 Items"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="1200 Items"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="1500 Items"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="1800 Items"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

WebForm.aspx.cs

protected void Page_Load(object sender, EventArgs e)

        {

            RadMenuItem item = null;

 

            for (int x = 1; x < radMenu.Items.Count+1; x++ )
                {
                item = radMenu.Items[x-1];

                for (int i = 0; i < x *300; i++)
                {
                    RadMenuItem rmi = new RadMenuItem();
                    rmi.Text = "text"+i.ToString();
                    rmi.Value = "value" + i.ToString();
                    rmi.Attributes["IdNiveau"] = i.ToString();
                    rmi.Attributes["Name"] = "child";
                    item.Items.Add(rmi);
                }
            }

        }

 

On Firefox 42.0, i can only expand "300 items", "600 items" and "900 items", the others display the message (in attach files).

May be is there a "Bind on Demand" method for radMenu ? because i didn't find anything.

Regards

[Ivan Danchev]

Hello Vallin,

Although the RadMenu performance, when loading multiple items, can be improved by using a WebService the control is not designed to handle such an amount of items. We would recommend using the TreeView control instead of the Menu. It supports Load on Demand and in the following documentation article you can find some tips on optimizing its performance when it is loaded with a large amount of nodes (thousands).

Regards,
Ivan Danchev
Telerik