Slow performance of a GridView inside an UpdatePanel


Here is an interesting problem we ran into recently.  The customer had a large GridView that was being updated by AJAX inside on UpdatePanel and seeing bad performance.


The reason is that the Client-Side Javascript has to walk the entire DOM of the Content of the UpdatePanel to tear down the HTML DOM as the Page goes through an Asynchronous update.


First Solution


To alleviate the Expensive Stack Walks to destroy DOM Elements and its related Time Delay, the developers suggested that we remove the Unnecessary payload from the DOM of the UpdatePanel during an Asynch Postback.


The Way you would implement this is to:


1. Hook up an Event handler to the beginRequest Event .


EX:

<script language =”javascript” type =”text/javascript”>
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(clearDisposableItems)
</script>

2. Destroy an DOM Elements that you don’t want the Framework to tear down by tearing it down manually.


EX:

function clearDisposableItems( sender , args ) {
if (Sys.Browser.agent == Sys.Browser.InternetExplorer ) {
$get(‘<%=GridViewID.ClientID%>’).tBodies[0].removeNode(true);
} else {
$get(‘<%=GridViewID.ClientID%>’).innerHTML=””;
}
}

This gave us a slight decrease in the time taken for async Updates, about 3 seconds less.  But, we are still far away from the optimal turn-around time of a few seconds.


In a sample that I setup on my machine using about 500 rows in a GridView,  the turn-around times were in the order of sub-seconds when the GridView had text labels instead of textboxes.


When I changed the text labels to textboxes, there was an exponential jump in the time taken to process the Form even before the request was submitted to the Server.


Sub-second response times changed to 25 seconds!!


The main reason for this slow-down is due to the number of Controls that are present in the Grid.  We cannot optimize the Javascript to give good performance in this scenario.


Alternative methods


So what can we do if we need a GridView with controls?  Well, the best suggestions are:



  • Enable paging to allow the control to stay smaller but still give all the information required.

  • Change the UI to allow for an optimal number of rows that give acceptable performance.

Comments (19)

  1. Quoo says:

    Alternative: Stop using the bloody monolith that is the GridView, and stop being lazy and implementing AJAX in performant oriented sites with an UpdatePanel.

  2. angry developer says:

    do not bring 5 million records and bind to a grid. It has been #1 problem with Datagrid. m$ft never suggest to use filter and possible search capabity to bring small dataset back

  3. redsquare says:

    surely the best option is to return json and just change the td contents rather than rebuild the thing everytime – also save bucket loads of k down the wire

  4. Vlad says:

    Use paging, for instance 100 rows inside update panel with 10 columns happens in under 2 secs.

  5. Ajay says:

    Just use custom pagination when you bind it to your gridview.  So that way you’re not fetching every single record upon page change.

    You can do this with all databases.

  6. What could i do if I have update panel in Master Page.

    And One of My content Page have such type of Gridview?

    [I know about custom pagination but i can’t do that here]

  7. You could change the sql query to limit the data coming back at that level.  Or you could find another means for updating it, like caching on the client-side and not using AJAX at all for example.

  8. anurag chauhan says:

    set updatepanel property updatemode="conditional"

  9. Miguel says:

    In case anyone else gives this a shot. I was getting an "object doesn’t support this property" error on this line:

    Sys.WebForms.PageRequestManager.getInstance().add_BeginRequest(clearDisposableItems)

    _BeginRequest should be _beginRequest:

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(clearDisposableItems);

    It was driving me nuts for a good 10 minutes.

    🙂

  10. Miguel,

    Thanks for catching that.  I have updated to post to reflect that.

  11. Julien says:

    It might sound obvious but if your using IE, make sure that you turn off Script Debbuging in your browser’s settings. It was taking 80secs to load a table because of that !

    Simple, obvious, but I didn’t spot that straight away !

    Won’t fix DOM loading time issue but measures will be realistic though, and I might save you one or two heart attacks 😉

  12. Navin says:

    Thanks. Will it also be applicable if GridView is inside a User Control which is used as an ASP.NET web part ?

  13. Aaron Carlson says:

    FYI, There appears to be a KB article about this very issue with a script you can add to your page to fix the performance issue.

    support.microsoft.com

    Also, they appear to have fixed this issue with asp.net 4.0.  However, I have not verified.  

  14. Manish Kale says:

    support.microsoft.com has the fix – thanks for the link Aaron

    This helped for gridviews with 1000 records editing line by line works without much delay (~ 2sec ), the moment the gridview has more rows ( e.g 3500 rows) it takes 6 seconds to "Edit". Looks like the issue now with the gridview itself, any ideas how to resolve issue with more rows without using paging.

    i am using 2.0 f/w, visual studio 2005

  15. Manish Kale says:

    the fix as provided in the KB article at  support.microsoft.com works for gridview having less than 1000 records.  For gridviews with 3500 rows it still takes 6-8 seconds to Edit. Would anyone know the resolution to quickly Edit a row in the gridiview irrespective of the number of rows ?  the fix seems to help partially but not fully.

  16. Skylar Hayes says:

    Aaron Thanks for that bug fix!!! I have been struggling with AJAX UpdatePanels and databound-controls rendering too slow. This fixed my problem and now i can use databound controls without having to reinvent the wheel!!!!

  17. anurag says:

    this is not helpul

    yes i use update panel but i need that

  18. actually

    i removed update panel then again load page but its ok

    problem that too much time consuming paging  5.44 second

    and with updatepanel 7.86 second