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

Answer 1

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

Answer 2

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