0

i have gridview and i want to show 2500000 data through infinite scrolling....loading data on demand. i am showing 200 data at a time. i have noticed that if user scrolling again and again to see all data or to reach last data then i am appending few table row every time when i am loading and populating data at client side and it make my client page heavy and slow.

i guess if i could implement bit different kind of infinite scrolling like when user scroll down then load next 200 data and remove previous few data and its related table row which goes beyond the view port of UI and same way when user scroll up then load previous 200 data and populate UI and remove last few data and its related table row which goes beyond the view port of UI.

this is my code snippet which works fine

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(function () {
        //Remove the original GridView header
        $("[id$=gvCustomers] tr").eq(0).remove();
    });

    //Load GridView Rows when DIV is scrolled
    $("#dvGrid").on("scroll", function (e) {
        var $o = $(e.currentTarget);
        if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
            GetRecords();
        }
    });

    //Function to make AJAX call to the Web Method
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {

            //Show Loader
            if ($("[id$=gvCustomers] .loader").length == 0) {
                var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                row.addClass("loader");
                row.children().remove();
                row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
                $("[id$=gvCustomers]").append(row);
            }
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }

    //Function to recieve XML response append rows to GridView
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        $("[id$=gvCustomers] .loader").remove();
        customers.each(function () {
            var customer = $(this);
            var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
            $(".name", row).html(customer.find("ContactName").text());
            $(".city", row).html(customer.find("City").text());
            $(".postal", row).html(customer.find("PostalCode").text());
            $(".country", row).html(customer.find("Country").text());
            $("[id$=gvCustomers]").append(row);
        });

        //Hide Loader
        $("#loader").hide();
    }
</script>

but i want to implement my though which i have discussed here. so it will be very helpful if some one discuss it with small sample code to implement my thought. thanks

Mou
  • 15,673
  • 43
  • 156
  • 275
  • What about if users stop their scroll halfway between 2 subsets of data. i.e. half of the first 200 is showing and half of the second 200? I know you're not asking for UX opinions - but I think you should know it will interfere with the scrolling a *lot*. At worst (with the 'typical' way of implementing infinite scrolling), there is a bit of a stand-still at the end whilst waiting for the ajax request to complete, but to have that stand still in both directions, and for multiple times to load data you had already previously loaded, seems like it could be a bit of a nightmare. –  Jan 20 '15 at 11:19
  • is it possible to achieve and handle in coding what i am trying ? – Mou Jan 20 '15 at 11:24
  • There is a reason 99.9% of infinite scrollers only add items at the end. That is easy. Having written a *two way-infinite scroller* for a project at work, I can warn you that scrolling upwards *without visual glitches* is not trivial. That is actually much harder to solve than the Ajax part and well beyond the scope of this question. – iCollect.it Ltd Jan 20 '15 at 11:35
  • but this may help: http://stackoverflow.com/questions/18461567/maintain-scrolltop-while-inserting-new-sections-above-the-current-viewed-element – iCollect.it Ltd Jan 20 '15 at 11:42
  • @Mou - of course, anything in code is possible. If you want to have a config entry that determines whether the app permits two-way infinite scrolling or just one-way is not a problem, but implementing it on the front-end for optimum UX will give you a headache. –  Jan 20 '15 at 11:46
  • i found a example of two way scrolling http://rawgit.com/Hill30/NGScroller/master/src/index.html and it looks fine but it uses probably angualr and i do not know angular. i want to implement the same with jquery. so anyone can help me. thanks – Mou Jan 20 '15 at 13:04

0 Answers0