CODEWITHSUNDEEP
asp.netjavascript
asyncwait
asyncwait

Reputation: 4537

ASP.NET/Javascript: Loading huge data in browser

I have this GUI that shows, let's say Customer Orders. When my client nailed down the requirements, he asked me to keep pagination like this,

Show Items Per Page : 10/50/150

For each customer there could be thousands of orders and each order will have atleast 50 attributes to show up in the screen. So, assume a 50 column html table with 2000 or 3000 records associated with it spanning across multiple database tables (anyway, this is a different story)

Things were breeze until yesterday, now my client has come up with new change requests, in that he specified Show Items like this,

Show Items Per Page : 10/50/150/All

Yes, he wanted to see 2000 or 3000 records by just select "All" option. Internally, this is not a big change, I would go back and remove the filters I apply on rowcount etc., but when it is loaded in GUI it really sucks ... view state was huge etc., etc.,

I know, this is a standard problem. How you guys deal with it? I cannot convince my client to remove this "All" option, he got stick to it. (the reason is simple, he got a big 42" screen where he can easily see 1000 items in one page)

I also tried to use javacript to prepare DOM in a ajax call .. but still, inserting 2000 TDs is really slow.

Any help is greatly appreciated.

Some Extra Info

  1. This application is a intranet application or else accessed through VPN connection

Upvotes: 0

Views: 1455

Answers (4)

Bogdan Maxim
Bogdan Maxim

Reputation: 5946

Instead of an ASP.NET GridView, you'd be better to use a DataRepeater. Better yet, if you are not constrained by technology, you can use Microsoft Ajax Preview 4 with WCF REST Services. You would just need to find some hacks to "stream" data from the service and display it. Also there is JQuery Grid (if you don't want to use Microsoft Ajax Preview 4) that supports JSON serialization.

Upvotes: 0

Eldar Djafarov
Eldar Djafarov

Reputation: 24685

This problem is about browser performance.
I suppose you can do two things.
1) you can use <div> instead of <table> (this is possible with CSS) because browser do not render table until closed tag. So it will take long to load page but it will render first results faster.
2) If you use Ajax+Json and render every <tr> piece by piece, you can render whole thing and only than put it in DOM. That will be faster because browser will not render every time you put another row

Upvotes: 3

Arnis Lapsa
Arnis Lapsa

Reputation: 47597

You might want to append table rows incrementally.
When client scrolls close to page bottom - fire an ajax call, return next page and render it.

But best solution would be to convince your client - this is not how web applications works. We had similar situation - pure nightmare.

Upvotes: 1

deostroll
deostroll

Reputation: 11975

If you want you can load the data in sort of installments. Sort of like how pagination works but it is not quite pagination to be precise. You can label your installments/pages with a proper ID. Load the page one after another via ajax calls. You can even show a progress bar to show how much data is actually loaded. Append this data to the table you are displaying the data in. I would not go about using server controls for this...you have to handle this via javascript or jquery.

Upvotes: 2

Related Questions