Virtual Listview for ASP.net?

Question

Is there a virtual listview for ASP.net?

---

Most tables (and grids, listview, data tables, data grids, grid views, list grids) i find for asp.net expect the user to page through data.

i want a listview that contains, for example, 10,000 items; and i don't want 10 pages.

The problem of a long list was solved in 1994 using a listview in "virtual" mode. The control need only be given the number of items to show. The control information about those items as required (i.e. as the user scrolls them into view, or tries to sort on a column).

Has anyone created a virtual listview (presumably using Asynchronous Javascript and XML, or Synchronous Javascript and XML)?

---

If the answer's "no": don't be afraid to answer the question. There's nothing wrong with an answer of:

No.

Answer 1

I just make one virtual ListView sample.

I start with a repeater that I render divs, with an attribute that contain the Data Base id that need to be loaded.

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
        <div data-id="<%# GetID(Container.DataItem) %>" class="DataLine"> 
        loading...
        </div>
    </ItemTemplate>
</asp:Repeater>

Next the javascript that check if this div is visible, and get the data using ajax.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

var cTimerID = null;
function RunWithSomeDelay()
{
    if(cTimerID) 
        clearTimeout(cTimerID);

    cTimerID = setTimeout(CheckWhatToShow, 1000);
}

function CheckWhatToShow()
{
    $(".DataLine").each(function(i, selected) {

        var ThisOne = $(selected);

        if(ThisOne.attr("Done") != "1")
        {
            if(isScrolledIntoView(ThisOne))
            {                   
                ThisOne.attr("Done", "1");
                // here you can use a simple ajax load, to load your data.
                ThisOne.text(ThisOne.attr("data-id"));
            }
        }
    });
}

$(document).ready(function() {  
    // first time run
    CheckWhatToShow();
    // run on scrool
    $(window).scroll(RunWithSomeDelay);
}); 

</script>

and here is my code behind as test that one

public partial class Dokimes_StackOverFlow_VirtualList : System.Web.UI.Page
{
    List<int> oMainIds = new List<int>();

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 3000; i++)            
            oMainIds.Add(i);            

        Repeater1.DataSource = oMainIds;
        Repeater1.DataBind();
    }

    public int GetID(object oItem){
        return (int)oItem;
    }
}

I tested and its working just find.

and here is the source code: http://www.planethost.gr/VirtualList.rar

Improvements that can be done:

• To optimize what div to search for visibility base on the scroll point.
• To load a group of data and place them on divs

Update I make some speed optimizing, and add ajax call test. For this optimizations work correct the height of the div that contains the data must be the same across the page. Left to load a group of data, get them as json and place them on the correct place.

http://www.planethost.gr/VirtualList2.rar

Answer 2

Try to look at infinite scroll jQuery plugin. I think that is it like what are you looking for.