Two tables on one page Asp.Net

Question

Hi,

My project is in Asp.Net Webforms using C#.

On one of my web pages, I want to have two tables. One is going to be a summary table and the other a more detailed breakdown of the summary. When the user clicks on one of the rows of the summary table, I want the corresponding breakdown rows to appear in the breakdown table.

These tables can have anything between 60 and about 500 rows.

I have thought of two possible ways of doing this and I'm not sure which is best, or if there is another, better way of implementing this:

1) When a user clicks on one of the rows in the first table, a postback event happens, and the data for the second table is loaded from the code behind.

2) When the webpage is loaded for the first time, both tables are filled with all of the possible data, but all of the rows in the second table have the "display: none;" CSS attribute. When a user clicks on a summary row, the CSS of the corresponding breakdown rows is changed using JavaScript.

Thanks in advance for any advice

Clivest

Answer 1

Can u please be more specific .. Do you want to display the table data or what.

Answer 2

You could also make an AJAX call when the user clicks on a row in the summary table to return the data for the 2nd table.

Answer 3

I'd go with your first thought and perhaps either

1. load the data for the second table through an AJAX request returning only row data in JSON (or maybe even the HTML for the table)

2. use an UpdatePanel

if the user only needs to view the data, I would go for the former, but if they need to edit the data in some way, I would probably choose the latter (even though I'm aware that UpdatePanels are effectively a full postback in async clothing, I feel their use can make the UI more fluid).

Answer 4

second way no way, loading all of data and then hiding showing is not a good idea, it will be slow and if you add more functionality it will only get in your way...

I recommend this two approaches:

1)first table with pagination

click on row triggers ajax call to page method

page method return second table

here, you can see how to that:

http://encosia.com/2008/02/05/boost-aspnet-performance-with-deferred-content-loading/

2)using of uframe

http://labs.omaralzabir.com/UFrame2005/

cheers