Alexander
Alexander

Reputation: 607

Large data rendering issue

What is the best way to render large data at the View? Is the some way to render it by portions?

Controller's action produce the large data set (1000x1000 matrix) and returns it to View. When I render it the browser hangs. The data is produced by the other service and I can not get it with a smaller portions.

Matrix is two dimensional array of INT values.

Controller code:

public ActionResult GetData()
{
    var result = ThirdPartyService.GetData();

    return View(result);
}

View code:

<table>             
        <% foreach (var x = 0; x < Model.Matrix.Count; x++) { %>
            <tr>
        <% foreach (var y = 0; y < Model.Matrix[x].Count; y++) { %>
            <td><% = Model.Matrix[x, y] %></td>
        <% } %>
        </tr>
    <% } %>
</table>

Upvotes: 0

Views: 1365

Answers (2)

Ivo
Ivo

Reputation: 8352

You can render an empty table and get the data from the server for using ajax to populate it. This way, you will download the layout and the data, but not the <tr><td></td></tr> content. If you do the math:

  • <tr></tr> for each row gives you 9*1000 = 9000 bytes
  • <td></td> for each cell in each row gives you 9*1000*1000 = 9000000 bytes
  • Total: 9009000

You can reduce about 9 mb from the request and that's a lot!

Also, you can turn on GZip on the server so the data moves compressed.

Upvotes: 1

toske
toske

Reputation: 1754

I guess that matrix that size isn't rendered whole on page, so my suggestion is to dynamically manipulate DOM, as user scrolls, by attaching to scroll event. This worked for me quite amazing, by using SlickGird as data rendering component, with written custom plugin to handle auto-complete drop-down with more than 1k elements. Browser has no problem with handling large data sets (I've tested up to 400k JS objects), but it definitely hangs when trying to display them. So just render the portion of the screen you're user is positioned at.

Upvotes: 1

Related Questions