Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Scrolling in ListGrid with RestDataSource does not emit "fetch" calls consistently

    Hi,

    I'm getting confused about how to implement paged scrolling with a RestDataSource.

    If I have *enough* records (more than 200 seems to do it) and I scroll a long way , a second data fetch operation is sent.

    Here are two, for example - the first fetch, and the second after scrolling :
    1)
    http://localhost/DepartmentForm/server/SearchData.php?_operationType=fetch&_startRow=0&_endRow=75&_textMatchStyle=exact&_componentId=Grid_1&_dataSource=Data_1
    2)
    http://localhost/DepartmentForm/server/SearchData.php?_operationType=fetch&_startRow=101&_endRow=176&_textMatchStyle=exact&_componentId=Grid_1&_dataSource=Data_1

    Note that there's a gap between 75 and 101, and 176 and the last 200 record.

    I fail, no matter how I scroll, to trigger any further data requests.

    I also want a page size of 20 for testing... and have tried setting the drawAheadRatio to 1 (because I don't see where it decides it wants the first 75 rows from) but that makes no difference.

    Paging examples for Restful Data where only clientside JS is used are few and far between, and not very helpful.

    Can somebody explain what's going on here?

    Many thanks
    Ben
    Tags: None
    #2
    The key is likely the response from the server. You have not posted what is sent back. In particular what are the totalsRows, startRow, endRow values returned for each request?

    Comment

      #3
      BUG BUG BUG BUG

      If the generated data set has , lets say 4000+ rows everything works perfectly.

      It the generated data set has 100 rows, it fetches the first 75, and never fetches the last 25.

      If the dataset has 200 rows, it will AT MOST issue two fetches, leaving a great big empty hole in the middle.

      There seems to a bug with the paging logic of SmartClient I'd say... but it'd be nice to know if I'm missing something first.

      Here's the full JS code :

      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <SCRIPT>
            var isomorphicDir = "./lib/isomorphic/";
        </SCRIPT>
        <script src="./lib/isomorphic/system/modules/ISC_Core.js">
        </script>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Foundation.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Containers.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Grids.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Forms.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_DataBinding.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/skins/SmartClient/load_skin.js>
        </SCRIPT>
		<style>
		</style>
    </head>
    <body>
        <script>
            
          
            
            var dataURL = "./server/SearchData3.php";
        
            isc.RestDataSource.create({
                ID: "Data_1",
                fields: [{
                    primaryKey: true,
                    name: "id",
                    hidden: "true",
                    type: "sequence"
                }, {
                    name: "ShortInfo",
                    hidden: "true",
                    type: "text"
                }, {
                    name: "LastName",
                    title: "Nachname",
                    type: "text"
                }, {
                    name: "FirstName",
                    title: "Vorname",
                    type: "text"
                }, {
                    name: "Organisation",
                    title: "Organisation",
                    type: "text"
                }]
            });
            
            Data_1.dataURL = dataURL;
            Data_1.dataFormat = "json";
			
            var myFields = [{
                canSort: false,
                name: "LastName",
                title: "Nachname",
                type: "text"
            }, {
                name: "FirstName",
                canEdit: true,
                title: "Vorname",
                type: "text"
            }, {
                name: "Organisation",
                title: "Organisation",
                type: "text"
            }];
            
			 
			 //drawAheadRatio:1, //This fetches more rows than we asked for in anticipation of scrolling
            isc.ListGrid.create({
                ID: "Grid_1",
                title: "People",
                width: 500,
                height: 250,
                alternateRecordStyles: true,
                selectionAppearance: "checkbox",
                selectionType: "single",
				showAllRows:false,
                dataSource: "Data_1",
                fields: myFields,
            });
            
			isc.Button.create({
				ID:"ButtonFetch",
				title:"Fetch",
				click : function(){Grid_1.fetchData();}
			})
			
			isc.HLayout.create({
				ID:"ButtonLayout",
				layoutMargin:20,
				members:["ButtonFetch"]
			})
			
			isc.VLayout.create({
                ID: "Layout1",
                members: ["Grid_1","ButtonLayout"]
            })
        </script>
    </body>
</html>
      Here's the silly PHP I'm using to test :
      Code:
      <?php

$people = array();
for ($i=$_GET["_startRow"]; $i<$_GET["_endRow"]; $i++){
array_push($people,array( "uid"=>$i, "ShortInfo"=>"Ballack, Michael", "LastName"=>"Name".$i, "FirstName" => "Michael", "Organisation"=>"The Firm"));
}
$json= json_encode($people);
if (!isset($_GET["_startRow"])){
	$_GET["_startRow"] = 0;
}
$response = "{response:{status:0,startRows:".$_GET["_startRow"].",endRow:".($_GET["_startRow"]+20).",totalRows:200,data:[".$json."]}}";
echo $response;
?>

      Comment

        #4
        OK, that wasn't quite true :

        It gets the first 75 rows, then does nothing until it gets to the 153rd row, and then gets the next 75 rows from the 153rd row and so on.

        If I set the dataPageSize to 20 on the ListGrid, then it fetches the first 20 rows of each 100'th set of rows (i.e. the 21st to 100th rows are empty and never fetched, the 220th to 300 rows are empty and never fetched and so on).

        This is bizarre.

        Comment

          #5
          Please post the data returned from the server. Without this information, there is no more help to give. You can see this in the debug console if needed.

          I have used the RestDataSource extensively and it most certainly does handle paging robustly.

          Comment

            #6
            I'm not sure exactly what you're after....

            Lets take the example from the code I've pasted in above (except that dataPageSize on the Grid is set to 20)

            I move the scrollbar 1/4 of the way down, and release, then 1/2 way down and release, then 3/4 of the way down, then fully down and release.

            The get requests sent to the server (with reply) are below :

            As the page first loads, immediately
            Code:
            http://localhost/DepartmentForm/server/SearchData3.php?_operationType=fetch&_startRow=0&_endRow=20&_textMatchStyle=substring&_componentId=Grid_1&_dataSource=Data_1
            Reply:
            Code:
            {response:{status:0,startRows:0,endRow:20,totalRows:200,data:[[{"uid":"0","ShortInfo":"Ballack, Michael","LastName":"Name0","FirstName":"Michael","Organisation":"The Firm"},{"uid":1,"ShortInfo":"Ballack, Michael","LastName":"Name1","FirstName":"Michael","Organisation":"The Firm"},{"uid":2,"ShortInfo":"Ballack, Michael","LastName":"Name2","FirstName":"Michael","Organisation":"The Firm"},{"uid":3,"ShortInfo":"Ballack, Michael","LastName":"Name3","FirstName":"Michael","Organisation":"The Firm"},{"uid":4,"ShortInfo":"Ballack, Michael","LastName":"Name4","FirstName":"Michael","Organisation":"The Firm"},{"uid":5,"ShortInfo":"Ballack, Michael","LastName":"Name5","FirstName":"Michael","Organisation":"The Firm"},{"uid":6,"ShortInfo":"Ballack, Michael","LastName":"Name6","FirstName":"Michael","Organisation":"The Firm"},{"uid":7,"ShortInfo":"Ballack, Michael","LastName":"Name7","FirstName":"Michael","Organisation":"The Firm"},{"uid":8,"ShortInfo":"Ballack, Michael","LastName":"Name8","FirstName":"Michael","Organisation":"The Firm"},{"uid":9,"ShortInfo":"Ballack, Michael","LastName":"Name9","FirstName":"Michael","Organisation":"The Firm"},{"uid":10,"ShortInfo":"Ballack, Michael","LastName":"Name10","FirstName":"Michael","Organisation":"The Firm"},{"uid":11,"ShortInfo":"Ballack, Michael","LastName":"Name11","FirstName":"Michael","Organisation":"The Firm"},{"uid":12,"ShortInfo":"Ballack, Michael","LastName":"Name12","FirstName":"Michael","Organisation":"The Firm"},{"uid":13,"ShortInfo":"Ballack, Michael","LastName":"Name13","FirstName":"Michael","Organisation":"The Firm"},{"uid":14,"ShortInfo":"Ballack, Michael","LastName":"Name14","FirstName":"Michael","Organisation":"The Firm"},{"uid":15,"ShortInfo":"Ballack, Michael","LastName":"Name15","FirstName":"Michael","Organisation":"The Firm"},{"uid":16,"ShortInfo":"Ballack, Michael","LastName":"Name16","FirstName":"Michael","Organisation":"The Firm"},{"uid":17,"ShortInfo":"Ballack, Michael","LastName":"Name17","FirstName":"Michael","Organisation":"The Firm"},{"uid":18,"ShortInfo":"Ballack, Michael","LastName":"Name18","FirstName":"Michael","Organisation":"The Firm"},{"uid":19,"ShortInfo":"Ballack, Michael","LastName":"Name19","FirstName":"Michael","Organisation":"The Firm"}]]}}
            After moving to the 1/4 position and releasing:
            No new get requests (it's also not showing any rows at this point in the grid)

            After moving to the 1/2 position and releasing:

            Sends :
            Code:
            http://localhost/DepartmentForm/server/SearchData3.php?_operationType=fetch&_startRow=101&_endRow=121&_textMatchStyle=substring&_componentId=Grid_1&_dataSource=Data_1
            Reply:
            Code:
            {response:{status:0,startRows:101,endRow:121,totalRows:200,data:[[{"uid":"101","ShortInfo":"Ballack, Michael","LastName":"Name101","FirstName":"Michael","Organisation":"The Firm"},{"uid":102,"ShortInfo":"Ballack, Michael","LastName":"Name102","FirstName":"Michael","Organisation":"The Firm"},{"uid":103,"ShortInfo":"Ballack, Michael","LastName":"Name103","FirstName":"Michael","Organisation":"The Firm"},{"uid":104,"ShortInfo":"Ballack, Michael","LastName":"Name104","FirstName":"Michael","Organisation":"The Firm"},{"uid":105,"ShortInfo":"Ballack, Michael","LastName":"Name105","FirstName":"Michael","Organisation":"The Firm"},{"uid":106,"ShortInfo":"Ballack, Michael","LastName":"Name106","FirstName":"Michael","Organisation":"The Firm"},{"uid":107,"ShortInfo":"Ballack, Michael","LastName":"Name107","FirstName":"Michael","Organisation":"The Firm"},{"uid":108,"ShortInfo":"Ballack, Michael","LastName":"Name108","FirstName":"Michael","Organisation":"The Firm"},{"uid":109,"ShortInfo":"Ballack, Michael","LastName":"Name109","FirstName":"Michael","Organisation":"The Firm"},{"uid":110,"ShortInfo":"Ballack, Michael","LastName":"Name110","FirstName":"Michael","Organisation":"The Firm"},{"uid":111,"ShortInfo":"Ballack, Michael","LastName":"Name111","FirstName":"Michael","Organisation":"The Firm"},{"uid":112,"ShortInfo":"Ballack, Michael","LastName":"Name112","FirstName":"Michael","Organisation":"The Firm"},{"uid":113,"ShortInfo":"Ballack, Michael","LastName":"Name113","FirstName":"Michael","Organisation":"The Firm"},{"uid":114,"ShortInfo":"Ballack, Michael","LastName":"Name114","FirstName":"Michael","Organisation":"The Firm"},{"uid":115,"ShortInfo":"Ballack, Michael","LastName":"Name115","FirstName":"Michael","Organisation":"The Firm"},{"uid":116,"ShortInfo":"Ballack, Michael","LastName":"Name116","FirstName":"Michael","Organisation":"The Firm"},{"uid":117,"ShortInfo":"Ballack, Michael","LastName":"Name117","FirstName":"Michael","Organisation":"The Firm"},{"uid":118,"ShortInfo":"Ballack, Michael","LastName":"Name118","FirstName":"Michael","Organisation":"The Firm"},{"uid":119,"ShortInfo":"Ballack, Michael","LastName":"Name119","FirstName":"Michael","Organisation":"The Firm"},{"uid":120,"ShortInfo":"Ballack, Michael","LastName":"Name120","FirstName":"Michael","Organisation":"The Firm"}]]}}

 	
2 requests
			
4.5 KB
	
(0 from cache)
5ms (onload: 2.41s)
            After moving to the 3/4 position :

            No new request

            After moving to the end of the list :

            No new request.

            The precise code being used is :
            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <SCRIPT>
            var isomorphicDir = "./lib/isomorphic/";
        </SCRIPT>
        <script src="./lib/isomorphic/system/modules/ISC_Core.js">
        </script>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Foundation.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Containers.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Grids.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Forms.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_DataBinding.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/skins/SmartClient/load_skin.js>
        </SCRIPT>
		<style>
		</style>
    </head>
    <body>
        <script>
            
          
            
            var dataURL = "./server/SearchData3.php";
        
            isc.RestDataSource.create({
                ID: "Data_1",
                fields: [{
                    primaryKey: true,
                    name: "id",
                    hidden: "true",
                    type: "sequence"
                }, {
                    name: "ShortInfo",
                    hidden: "true",
                    type: "text"
                }, {
                    name: "LastName",
                    title: "Nachname",
                    type: "text"
                }, {
                    name: "FirstName",
                    title: "Vorname",
                    type: "text"
                }, {
                    name: "Organisation",
                    title: "Organisation",
                    type: "text"
                }]
            });
            
            Data_1.dataURL = dataURL;
            Data_1.dataFormat = "json";
			
            var myFields = [{
                canSort: false,
                name: "LastName",
                title: "Nachname",
                type: "text"
            }, {
                name: "FirstName",
                canEdit: true,
                title: "Vorname",
                type: "text"
            }, {
                name: "Organisation",
                title: "Organisation",
                type: "text"
            }];
            
			 
			 //drawAheadRatio:1, //This fetches more rows than we asked for in anticipation of scrolling
            isc.ListGrid.create({
                ID: "Grid_1",
                title: "People",
                width: 500,
                height: 250,
                alternateRecordStyles: true,
                selectionAppearance: "checkbox",
                selectionType: "single",
				showAllRows:false,
				dataPageSize:20,
				dataFetchMode: "paged",
				autoFetchData: true,
                dataSource: "Data_1",
                fields: myFields,
            });
            
			isc.Button.create({
				ID:"ButtonFetch",
				title:"Fetch",
				click : function(){Grid_1.fetchData();}
			})
			
			isc.HLayout.create({
				ID:"ButtonLayout",
				layoutMargin:20,
				members:["ButtonFetch"]
			})
			
			isc.VLayout.create({
                ID: "Layout1",
                members: ["Grid_1","ButtonLayout"]
            })
        </script>
    </body>
</html>
            The PHP is the same as above.

            Is there any more information necessary to discern where the problem lies... I just hope it doesn't originate 60cm in front of the monitor.

            Comment

              #7
              That's just what I was looking for. First, fix the server to return "startRow" instead of "startRows". There is a typo in the JSON example.

              Second, if the above change does not fix your issue, in the debug console, enable Debug-level logging on ResultSet and perform the first two steps of your testing. Once you see how the client is maintaining the cache it is likely you will find the cause.

              Comment

                #8
                The startRow tip didn't change anything. I can see how to showConsole, but that doesn't seem to help me very far (and where do I see anything about the cache).

                Thanks for your help.

                Comment

                  #9
                  As noted in my previous post, set the logging level for ResultSet to "Debug" and do your testing again. The log will show all the details about the cache as it makes requests for data to fill it.

                  Read up on the Dev console. This tools will save you tons of time in the future tracking down server exchange issues or layout problems.

                  Comment

                  Previous template Next
                  Working...
                  X