Really slow RadioButtonList

4 posts, 0 answers
  1. Daniel Schiavini
    Daniel Schiavini avatar
    2 posts
    Member since:
    Aug 2009

    Posted 07 Aug 2009 Link to this post

    Hello Telerik,

    The environment:
    - I created a form with a RadGrid with 3 levels
    - The third level (the question) has a user control that has a RadioButtonList
    - The second level (the sub-section) has a RadioButtonList that looks like the other one, to change the value of all the radios in this sub-section
    - The first level (the section) just shows the titles
    - Screen shot: Here
    - The form used has 53 controls, each one of them has a RadioButtonList with 6 options, a RadTextBox and a HiddenField. They are divided in 18 sections, and the header of those sections has also a RadioButtonList with 6 options each. That's a total of 71 RadioBoxLists and 426 radios.

    Now, the problem:

    - When clicking in any radio in the third level, the CPU of the client goes to 100% for around 1 second. With a slower computer, it goes up to 3 seconds.
    - When clicking the radio in the sub-section, it takes a real long time to change the indexes from the inside radios. In a good client computer, around 10 seconds, and up to 30 seconds in a slower one. The following JavaScript function is used:
     
                function ChangeChildScores(QuestionID, ItemIndex, OwnerTableViewID) { 
                    var OwnerTableView = document.getElementById(OwnerTableViewID); // The whole table 
                    var parentTable = OwnerTableView.getElementsByTagName('table')[ItemIndex]; // The table with the questions 
                    var TRs = parentTable.getElementsByTagName('tr'); // TR for each question 
                    for (var r = 0; r < TRs.length; r++) { 
                        var inputs = TRs[r].getElementsByTagName('input'); // Radio boxes 
                        for (var i = 0; i < inputs.length; i++) { 
                            if (inputs[i].type == 'radio' && inputs[i].value == QuestionID) { // Checking the radio if the ID is correct 
                                inputs[i].checked = true
                            } 
                        } 
                    } 
                } 
    - It is much faster when using Firefox than Internet Explorer, but Firefox is still really slow.

    Finally, the questions:
    - Is it possible to improve the performance, or should I just forget using the form decorator?
    - The decorator is in my master page. Is it possible to turn it off for a single section?

    Thank you very much,
    Daniel Schiavini
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 07 Aug 2009 Link to this post

    Hi Daniel Schiavini,

    RadFormDecorator operates entirely on the client.

    In the case with checkboxes and radiobuttons, the script looks for these particular controls, puts them away from the viewport (absolute position and negative left value), and then manipulates the <label />s (when there is no <label /> associated with the control, RadFormDecorator creates one) by toggling background images for the "checked" and "normal" states of the controls. As this is enrirely done on the client, you should agree that 426 radiobuttons in 71 lists is too much and the slowdown is expected and normal. Unfortunately, with such great number of radiobutton controls there is no way for optimizing the performance of RadFormDecorator, and the only thing I can recommend is to abandon the idea of using it in that particular case.

    Have a great weekend,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel Schiavini
    Daniel Schiavini avatar
    2 posts
    Member since:
    Aug 2009

    Posted 07 Aug 2009 Link to this post

    Hello Martin,

    What is curious is that the loading time of the page is not longer. Only when you click a radiobox it gets difficult.
    So does the decorator check for all the boxes in the page when one is clicked?

    And my second question on the last post was:
    - The decorator is in my master page. Is it possible to turn it off for a single section?

    Thank you!
  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 10 Aug 2009 Link to this post

    Hello Daniel Schiavini,

    When toggling the selected / unselected states of the radiobuttons, RadFormDecorator checks only the current radiobutton group, it does not loop through all controls on the page. However, I suppose that the toggle is somehow made clumsy and slow because of the presence of that much controls.

    On your second question - there is not an exclusion zone property, unfortunately. However, you may optimize the performance by chooseing which controls to decorate with the DecoratedControls property of RadFormDeocrator.

    Regards,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top