I need to be able to display a large number (up to 300) columns in a WebGrid. There may be as many as 200 rows. I have quickly thrown together a test application that fills a DataTable with 300 column (all of type String) and 200 rows which I then bind to a WebGrid. I have not tweaked the WebGrid in any way from its defaults.
I am seeing very slow performance when moving around the grid. Moving from Cell to Cell is sluggish and when I change any Cell value there is a very long delay before getting control back to the end user.
Can you give me some tips on how to optimise the end user experience when using the WebGrid in this kind of scenario. I have tried setting EnableViewState to False which did not help that much. Is there some ReCalculation going on that I can turn off or can I stop some events firing maybe?
As part of the application I support, we had a simular request, 200+ columns and 400+ rows. I found that columns affected performance much more than than did rows. With a fully populated grid, moving from cell to cell would take 5 seconds or more. This was totally unacceptable to our users, so I devised methods to group the columns of data and let the users decide on which type of data they wanted to see at one time. I also devised methods to group the rows, so users could filter out rows of data that was not necessary at that moment. This improved performance to a level acceptable by the users. Still not as fast as their client based version of the application, but that is the price we pay for browser based applications.
As WombatEd and Vince mentions, most of the performance issue is due to the huge number of objects (individual cells) created. One way I found to improve performance was to eliminate highlights (row, cell, and column). If you highlight a row, it has to highlight every cell in the row, and that takes time. Same with column selection. If a user selects a column, I only highlight the header, and that improves performance some too.
I have been working on this grid going on 2 full years now, finding small ways to improve performance, especially when they wish a new feature added which would slow down the whole process.
Good Luck
Hello Roy,
If you refer only to UltraWebGrid, the control already does that automatically -- the functionality is spread in different files and they are loaded only if specific features are enabled (e.g. sorting, grouping, etc).
In general, you can programmatically include javascript file using the technique here (with javascript on the client):
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Or here (with C# on the server)
http://www.tech-archive.net/Archive/DotNet/microsoft.public.dotnet.framework.aspnet/2007-06/msg00352.html
Hi Vince,
Is there are way in which we can set the javascript to be stored as a separate file, loaded only on demand?
Kind Regards,Roy.
Internet Explorer, unfortunately, does not process JavaScript very efficiently. This is likely part of your cause.
In my experience, the more HTML elements and JavaScript objects you have on your page, the slower any JavaScript performs. With 600 cells, you have at least 600 JavaScript objects for the cells alone, plus all of the related HTML elements - not to mention all of the additional objects we need to create to give those cells their functionality and the events we process on those objects. Add objects for the rows, bands, columns, column headers, and so forth, and that can add up when you have a lot of data.
Many thanks your reply. I have and will continue to read those other posts... I agree 100% with you... this is kind of a weird request... and I am already recommending other approaches.
However I am still kind of intrigued as to why simply moving the cursor from one cell to another gets so much slower with a big grid. After all there appears to be no need to round trip to the server when moving from one Cell to another.
Maybe it is just web browser slowness (I am using IE6). In fact the more I think of it this is more likely the explanation. Or could it be to do with the data binding maybe ?
If you want to have a quick play for yourself... I attach some Page_Load() code which I wrote to try this out. Simply create a aspx web form and slap on a UltraWebGrid to try it out.
Once the Grid and its contents are rendered see for yourself how slow it is to move the cursor from Cell to Cell.
One other point... when I change rowCount=2 which results in a grid of only 600 Cell's (i.e. 2 rows by 300 columns) I still see slow performance when editing Cell contents. Any thoughts on this one ?
protected void Page_Load(object sender, EventArgs e) { DataTable dataTable = new DataTable();
int columnCount = 300; int rowCount = 100;
for (int i = 0; i < columnCount; ++i) { string columnName = String.Format("Col{0}", i+1); dataTable.Columns.Add(columnName, typeof(String)); }
for (int i = 0; i < rowCount; ++i) { DataRow row = dataTable.NewRow(); for (int j = 0; j < columnCount; ++j) { row[j] = String.Format("Row{0},Col{1}", i+1, j+1); } dataTable.Rows.Add(row); }
//ultraWebGrid.EnableViewState = false; ultraWebGrid.DataSource = dataTable; ultraWebGrid.DataBind(); }