Question

I am rendering 1000+ records on a web page using nested repeaters. The problem i am facing is that it takes too much time to render the data on page.

Here is the concept layout of repeaters.

-Main

-Level 1

        -Level 2

                -Level 3

                -Level 3

        -Level 2

-Level 1

-Main

When page loads Main and level 1 rows are showing. when user click on level 1 row, level 2 row appears and by clicking on level 2, level 3 row shows up.

I am loading data to all the repeaters at once and hiding/showing the level 2 and level3 rows using jQuery.

The problem is that i get data within a second from database but it takes too long to render.

One solution is that i load Main and Level 1 row at the page load and show level 2 and 3 rows based on user click.

Is there any other way to improve the performance?

Thanks in advance

I am loading the data onto page at once and then hiding Level 2 and Level 3.

Answer 1

Displaying over 1000 records (assuming any normal complexity in each record) is going to take a long time no matter what. Here are some suggestions:

1. Split the Level 1 records across several pages (like Google results) where users can click a next page/previous page button, and/or let users select a page index from a drop-down list and load that page’s results from the cache/session variable.
2. When users select a particular item in Level 1, redirect them to a separate page that loads all Level 2 items, and do the same thing for Level 3.
3. Use AJAX to build your Level 2 and Level 3 records only after a user clicks on that particular level.
4. Filter your results based on some options that the user must select before you go out to the database and build this page.