We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Endless scrolling

Thread ID:

Created:

Updated:

Platform:

Replies:

121298 Nov 29,2015 06:35 AM UTC Dec 29,2015 08:57 AM UTC JavaScript 3
loading
Tags: ejmListView
Sagi Karni
Asked On November 29, 2015 06:35 AM UTC

Hi,
Are you planing to add Endless scrolling camapility to the mobile list view ?
Thx
Sagi

Dhinesh Ravi [Syncfusion]
Replied On November 30, 2015 07:18 AM UTC

Hi Sagi,

We considered this “Endless scrolling for Mobile ListView” as a feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Dhinesh Ravi



Sagi Karni
Replied On December 28, 2015 01:20 PM UTC

Can you recommend such a list view widget that implements such infinite scrolling ?

Thx
Sagi

Dhinesh Ravi [Syncfusion]
Replied On December 29, 2015 08:57 AM UTC

Hi Sagi,

Thanks for the update.

We have already locked a feature report for “Endless Scrolling in Mobile ListView” and a support incident has been created under your account to track the status of the requirement. Please log on to our support website to check for further updates.


https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

But,  we can achieve the endless scrolling for ListView in sample level. Refer to the following steps to achieve the required scenario.

We need to create a div elements for ListView and ScrollPanel control. So that ListView will be rendered within ScrollPanel, and on ScrollEnd event, we can update the dataSource for ListView. Refer to the following code example.

[Html]

<!--ScrollPanel target -->

<div id="target">

        <!--ScrollPanel renders within the div element of the target-->

        <div>


             <!--ListView div element-->

            <div  id="remotelistbox">

            </div>

        </div>

    </div>


<!--ScrollPanel control-->
    <div id="scroller" data-role="ejmscrollpanel" data-ej-target="target" data-ej-scrollend="scrollend"></div>


In the script, we need to create datamanager object using query to fetch datasource, and in the document ready function, we need to initialize the ListView using the fetched data. Refer to the following code example

[Html]

<script type="text/javascript">

        // Initialize the dataManager for the remote datasource

        window.datasource = ej.DataManager({

            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

        });

        //To Map the text values from the datasource

        window.dbitem = { "text": "ShipCity" };


        //Fetch 17 items from the remote datasource

        var query = ej.Query().from('Orders').select('ShipCity').take(17);

        $(function () {

            // Execute the query to retrieve the datas from datasource

            window.datasource.executeQuery(eval(query)).done(function (e) {

                //DB for ListView control

                window.db = e.result;

                $("#remotelistbox").ejmListView({ dataBinding: true, fieldSettings: window.dbitem, dataSource: window.db, allowScrolling: false });

            });
        })
</script>


This renders the ListView with 17 items fetched from remote URL. Then in the ScrollEnd event of ScrollPanel, we need to update the datasource of ListView control. Refer to the following code example.

[Html]

<div id="scroller" data-role="ejmscrollpanel" data-ej-target="target" data-ej-scrollend="scrollend"></div>

<script type="text/javascript">

       //Executes once the scrollpanel scrolling stopped

        function scrollend(args) {


            // To get the number of li elements in the listview

            var index = $("#remotelistbox li").length;


        // Checks whether the maximum scrollPosition and scrollend position are equal

           if (args.object._maxScrollY == args.y) {

               var getRange = index + 10;


//fetches the datas within the specified range 

window.datasource.executeQuery(eval(ej.Query().from('Orders').select('ShipCity'). range(index, getRange))).done(function (e) {

                  //Merges the existing datasource with the new datas

                        window.db = window.db.concat(e.result);

                        $("#remotelistbox").ejmListView({ dataSource: window.db });

                        $("#scroller").ejmScrollPanel('refresh')

                    })

            }
        }
</script>


Once the ScrollEnd is triggered, we need to calculate the range (next n items = list items length +n). In the above example we have fetched next 10 items and  updated the ListView control. ListView datasource gets updated only if the maximum scroll position and scrollEnd event args.y coordinate are equal

We have also created the simple sample for the requirement. Refer to the sample in the following link.

http://jsplayground.syncfusion.com/ncdddt2p



Regards,
Dhinesh R

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;