Performance issue when dynamically adding items to a RadContextMenu in the client

7 posts, 0 answers
  1. Ragnar
    Ragnar avatar
    5 posts
    Member since:
    Nov 2010

    Posted 27 Jun 2011 Link to this post

    Hello!

    I am experiencing a performance issue when dynamically adding items to a RadContextMenu in the client.  I am using the following call:

    Menu.get_items().add(menuItem);

    Each call is taking between 30 to 70 ms according to my measurements on my machine in IE9/W7!  Is there some workaround to increase the performance? 

    (I am loading up to 50 items)

    Best regards,
    Ragnar
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Jul 2011 Link to this post

    Hi Ragnar,

    Can you please provide a code snippet of the function how exactly you add items to the RadMenu control?

    Greetings,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Ragnar
    Ragnar avatar
    5 posts
    Member since:
    Nov 2010

    Posted 06 Jul 2011 Link to this post

    Here is the code snippet:

    function webServiceContextMenuLoadingSuccess(sender, args) {
        var result = args.get_data();
        var menuID = args.get_context()._element.id;
        var menu = $find(menuID);
     
        if (menu.get_persistLoadOnDemandItems()) {
            menu.trackChanges();
        }
     
        var childItems = menu.get_items();
     
     
        var itemCount = 0;
        var separatorCount = 0;
     
        for (i = 0; i < result.length; i++) {
            var itemData = result[i];
            var dynamicItem = new Telerik.Web.UI.RadMenuItem();
            dynamicItem._loadFromDictionary(itemData);
     
            if (dynamicItem.get_navigateUrl() === "") {
                dynamicItem.set_navigateUrl("#");
            }
     
            if (dynamicItem.get_isSeparator())
                separatorCount += 1;
            else
                itemCount += 1;
     
            //This operation is a bottleneck.  Measurements show 30 - 70 ms per item (1,5 - 3,5 sec pr 50 items)!
            childItems.add(dynamicItem);
     
        }
     
    }

    The last line is the performance bottleneck!

    Greetings.
    Ragnar
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Jul 2011 Link to this post

    Hello Ragnar,

    I noticed that in the provided code you call only trackChanges() function without the commitChanges() function. However, if you need to preserve the changes that you have made you will need to call both methods as explained in this help article. Otherwise, you do not need to call any of the above mentioned functions which will consequently increase the performance.

    All the best,
    Kate
    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!

  5. Ragnar
    Ragnar avatar
    5 posts
    Member since:
    Nov 2010

    Posted 05 Aug 2011 Link to this post

    Hello Kate.

    I shortened the function because I did not think it was relevant to this problem.  commitChanges() is called if trackChanges() is called as you can see in the following code:

    function webServiceContextMenuLoadingSuccess(sender, args) {
        var result = args.get_data();
        var menuID = args.get_context()._element.id;
        var menu = $find(menuID);
     
        if (menu.get_persistLoadOnDemandItems()) {
            menu.trackChanges();
        }
     
        var childItems = menu.get_items();
     
     
        var itemCount = 0;
        var separatorCount = 0;
     
        for (i = 0; i < result.length; i++) {
            var itemData = result[i];
            var dynamicItem = new Telerik.Web.UI.RadMenuItem();
            dynamicItem._loadFromDictionary(itemData);
     
            if (dynamicItem.get_navigateUrl() === "") {
                dynamicItem.set_navigateUrl("#");
            }
     
            if (dynamicItem.get_isSeparator())
                separatorCount += 1;
            else
                itemCount += 1;
     
            //This operation is a bottleneck.  Measurements show 30 - 70 ms per item (1,5 - 3,5 sec pr 50 items)!
            childItems.add(dynamicItem);
     
        }
     
        if (menu.get_persistLoadOnDemandItems()) {
            menu.commitChanges();
        }
     
       [... some code]
    }

    I am sorry if that was misleading.  The problem still exists.

    Regards,
    Ragnar

  6. Ragnar
    Ragnar avatar
    5 posts
    Member since:
    Nov 2010

    Posted 10 Aug 2011 Link to this post

    I have commented the trackChanges()/commitChanges() lines out and it does not solve the problem (quick check results in ~6% faster code)!

    I have also discovered that IE 9 takes about 2 times longer processing the menu than FF 4 and Chrome 13!  When it is emulating IE 7 (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />)  then it takes about 3.4 times longer!
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 11 Aug 2011 Link to this post

    Hello Ragnar,

    Thank you for the interest. In general, the RadMenu control is not designed to load a lot of items as it is the case in your scenario. Therefore you encounter such performance issue when loading it by using client-side. I could offer you to use  Web Service but its limitation is that it loads only the child items. We will consider your request as a future improvement of the RadMenu control. My apologies that currently we can not offer a suitable workaround.

    Best wishes,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top