I have a page that contains a table inside an update panel. The table is 10 columns wide and when the page is initially loaded it only contains the header row and a + under the table to add a row. The problem I have is after adding 4 rows the 5th slows down a lot. And from then on addings more rows gets slower and slower. Whenever the + is clicked it causes the update panel to update and dynamically recreate the table with another row. So it starts by just creating the header. The first time you click the + it creates the header and the 1st row. The next time it creates the Header and 1st and 2nd rows.. and so on.
I cannot figure out a way to speed this up, and as the user approaches 10 rows it begins to slow down to 3 to 4 seconds after htiting the button that anything happens. I think the problem is the viewstate is getting huge and causing it to be much slower. I cannot even get update progress images to work. They don't pop up right away, and when they do pop up they go away immediatly.
Any suggestions on ways to improve the speed? Or I am stuck dealing with a slow page.
Can you post any code?
You're right. The viewstate gets sent back for every AJAX call which means that adding a row
may as well be posting the whole page to the server from the servers point of view.
Use this plugin to see what's being sent over the wire:http://www.nikhilk.net/Project.WebDevHelper.aspx
Check outhttp://smarx.com/posts/delayed-load-with-an-updatepanel.aspx
This shows the oposite of what you're doing.
What you need to do is just update the new row instead of the whole grid.
HTH,
Jonathan.
Is there a way to add a row without recreating the whole table? If I update the panel without recreating the table the table goes away right now.
Thanks for the plugin, I will have to check that out.
Try to set <compilation debug = "false" />
may it will improve some ammount of performance..
If you have each row in a div for example:
<div id="table">
<div id="row1">hello row 1</div>
<div id="row2">Hello row 2</div>
</div>
<asp:Button ID="clickme" runat="server" OnClientClick="javascript:updateTable(); return false;" Text="Add Row" />
Then you could do the following in JavaScript:
<script type="text/javascript">
function updateTable()
{
var table = document.getElementById("table");
table.innerHTML = table.innerHTML + "<div id='row3'>hello row 3</div>";
}
</script>
HTH,
Jonathan.
I have the same problem. Luckily, after optimizing the 'retrieval time'/row, the speed was acceptable for the number of rows I wanted to display.
If you want speed, you can try using the JavaScript method above, and don't update via Updatepanel. So your buttons change the data behind the scenes (without postback), while calling the JavaScript to show the updates.
