Endless scrolling

[Sagi Karni]

Hi,

Are you planing to add Endless scrolling camapility to the mobile list view ?

Thx

Sagi

[Dhinesh Ravi]

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]

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

Thx

Sagi

[Dhinesh Ravi]

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