Back to General - Yahoo! TV Widgets Forum
0

Pager not working with Grid

Hello All,
Has anyone successfully implemented the pager functionality with the grid. I am using the example given in the YWE_Developer_Guide, but its not working. The data is coming from the server which I am able to display in the logs, but as soon as the onGotPage is called, it returns false. I went through the framework code as well and checked out the onGotPage function implementation. It returns false if the fetchparam.key does not have any value, or no value is present at the fetchparam.key of the _paramsMap.
How to send the fetchparam.key and what should be a fetchparam.key?
Following is the code I have written:
CODE
                var pageSize = 5;
		var fetchSize = 25;
		var howMany = 5;
		fetchParams = {'page':1, 'per_page':5};

		 pager = new KONtx.utility.Pager(pageSize, fetchSize, this.fetchData(fetchParams, this.fetchResp.bindTo(this)), this, howMany);
       this.controls.grid = new KONtx.element.Grid({
			id: __baseID+'.Grid',
			rows: this.config.rows,
			columns: this.config.columns,
			carousel:true,
			manageWaitIndicator: true,
			pager: pager,
			styles: {
				width: KONtx.utility.scale(600),
				height:KONtx.utility.scale(this.height-150),
				vOffset:KONtx.utility.scale(100),
				hOffset: KONtx.utility.scale(40),
			},
			cellCreator: this.imageCellCreator,
			cellUpdater: this.imageCellUpdater,
		}).appendTo(this);
		
       this.controls.grid.attachAccessories( this.controls.pageindicator );

      
    // Update View
        updateView: function()
        {
		log("%%%%%%%%%%%%%%%%%%%%%%%%%%%% Update function called");
		this.controls.grid.changeDataset([], true);
        }

      // Get Data in slice
       fetchData: function(fetchParams,callback) 
	{
               // Make a  connection and send a request.
                var request = new XMLHttpRequest();
		request.onreadystatechange = this.fetchResp;

		request.open( "POST", baseListUrl, true);
		request.setRequestHeader( "Content-type", "text/xml; charset=utf-8");
		request.setRequestHeader( "SOAPAction", "http://services/schemas/Search");
		request.setRequestHeader( "Content-Length", myFinalString3.length);
		var timeout = 30;//TODO move as instance variable => this.timeout
		request.timeout = timeout;//was this.timeout
		request.fetchParams = fetchParams;
		request.pager = pager;
		request.send( request );
        }

         fetchResp: function()  
	{
               // Get the data
               // Print the Data
               var pagerTest = pager.onGotPage(fetchParams,pagerDataArray, pagerDataArray.length);
               // printing pagerTest is displaying false 
        }


So, the data does come from the server, but grid is not updated with the result. There are some threads, which are talk about pager, but no one said if it works or not. Does it really work? Or am i missing something,

Please help since I need to download around 1000 data and display in the grid and I need the pager functionality to work.

Thanks in Advance.

by
Report Abuse
11 Replies
  • Use initItems() and changePage(0, {refresh:true}) where you would normally use changeDataset() if you weren't using a pager.
    Pass in enough items to initItems() for a page in the grid and specify the total number of rows in ALL of the pages...not just the first one. That will get things started. After that, the pager will call your callback function when it needs data and will tell you through the parameters which "pages" of data it needs. Your callback function should request the data and then when the response comes back from the server you call the pager's onGotPage().
    Report Abuse
    0
  • QUOTE (d_caveney @ May 19 2010, 09:52 PM) <{POST_SNAPBACK}>
    Use initItems() and changePage(0, {refresh:true}) where you would normally use changeDataset() if you weren't using a pager.
    Pass in enough items to initItems() for a page in the grid and specify the total number of rows in ALL of the pages...not just the first one. That will get things started. After that, the pager will call your callback function when it needs data and will tell you through the parameters which "pages" of data it needs. Your callback function should request the data and then when the response comes back from the server you call the pager's onGotPage().


    Thanks for your reply d_caveney. I tried your suggestions, of calling initItems() and providing the first chuck of data to the pager. Also used changePage(0, {refresh:true}) inside updateView instead of changeDataset(). Now, this is whats is happening:

    1. First the grid opens with no data and is blank, then when i try to scroll to the next page from the pageIndicator, the data is displayed. It shows only 10 pages, but I am able to scroll to only the 7th page.
    2. Also, the callback method which we pass in the pager constructor, never gets called, which should be getting called again and again. This is how I have constructed the pager:



    CODE
    // Pager declared in create view
    		var pageSize = 5;
    		var fetchSize = 50;
    		var howMany = 3;
    		fetchParams = {'page':1, 'per_page':5};
    	
    		pager = new KONtx.utility.Pager(pageSize, fetchSize, this.fetchData, this, howMany); 

    // After I get the first chuck of data
     pager.initItems(arr,arr.length);



    // fetchData :function(){

    // fetch chuck of data again
    var request = new XMLHttpRequest();
    request.onreadystatechange = this.fetchResp;

    request.open( "POST", baseListUrl, true);
    request.setRequestHeader( "Content-type", "text/xml; charset=utf-8");
    request.setRequestHeader( "SOAPAction", "xxxxxxxxxx");
    request.setRequestHeader( "Content-Length", request.length);
    var timeout = 30;
    request.timeout = timeout;
    request.fetchParams = fetchParams;
    request.pager = pager;
    request.send( request);

    }


    fetchResp : function(){
    // Parser the response

    // call onGotPage() func
    pager.onGotPage(fetchParams,pagerDataArray, pagerDataArray.length);
    }

    // Inside UpdateView
    this.controls.grid.changePage(0, {refresh:true});





    I am stuck with pager for quite a few days now. Please help with where I am goin wrong. Some code would really help.

    Thanks,
    Sougata.
    Report Abuse
    0
  • Here's how it worked for me. My fetchPaged() routine uses the second parameter for a callback but you should be able to keep it simpler.

    var foo = new KONtx.Class({
    Extends: KONtx.system.SidebarView,

    // the number of rows to display on a page
    gridRows:10,
    // the number of rows of that we will fetch when we need more data
    fetchRows: this.gridRows * 6,
    // the number of pages cached before and after the "current" page
    loadFactor: 3,

    initialize: function() {
    this.parent();
    this.latestPager = new KONtx.utility.Pager(this.gridRows, this.fetchRows,
    this.fetchPages, this, this.loadFactor);
    },

    fetchFirstPage: function() {
    // fetch the first page of videos and callback firstPageFetched when done
    $API.fetchPaged({page: 0, per_page: this.gridRows}, this.firstPageFetched, this, this.persist.url);
    },

    firstPageFetched: function(pagerParams, items, totalResults) {
    this.controls.grid.pager.initItems(items, totalResults);
    this.controls.grid.changePage(0, {refresh:true});
    },

    fetchPages: function(pagerParams) {
    // fetch the requested videos and callback pagesFetched when done
    $API.fetchPaged(pagerParams, this.pagesFetched, this, this.persist.url);
    },

    pagesFetched: function(pagerParams, items, totalResults) {
    this.controls.grid.pager.onGotPage(pagerParams, items, totalResults);
    },

    createView: function (){
    this.controls.pageindicator = new KONtx.control.PageIndicator({
    ...
    }).appendTo(this);

    this.controls.grid = new KONtx.control.Grid({
    pager: this.latestPager,
    rows: this.gridRows,
    ...
    }).appendTo(this);

    this.controls.grid.attachAccessories( this.controls.pageindicator);
    },

    updateView: function (){
    this.fetchFirstPage();
    }
    },

    });
    Report Abuse
    0
  • PLEASE IGNORE THE PREVIOUS POST.


    Thanks a lot for your reply. It was of great help.
    I did as per your suggestions and able to get the Data the first time, the onGotPage is now getting called, but it is still returning false. So, pager is not working for the next set of data.

    Here is my code:
    CODE
    var MyMediaView = new KONtx.Class({
    	ClassName: 'MyMediaView',
    	
    	Extends: KONtx.system.FullscreenView,

             pageSize : 5,
    	 fetchSize : this.pageSize * 5,
    	 loadfactor : 5,
    	 fetchParams : {'page':0, 'per_page':5},
    	
    	initialize: function() {
    		this.parent();
                    // Initialize Pager
                    log("[Log] --------------  Pager deleared  --------");
    		this.mediaPager = new KONtx.utility.Pager(this.pageSize,this.fetchSize, this.fetchPages, this, this.loadfactor); 
    	},
    }
         
    updateView: function()
    	{
    	     log("[log]--------- START: updateView ------");
    	    // this.controls.grid.changePage(0, {refresh:true});
                this.fetchFirstPage();
    	    
    	},

      fetchFirstPage : function(){
             var request = new XMLHttpRequest();
    	request.onreadystatechange = this.firstPageFetched;

    	request.open( "POST", url, true);
    	request.setRequestHeader( "Content-type", "text/xml; charset=utf-8");
    	request.setRequestHeader( "SOAPAction", "XXXXXXXX");
    	request.setRequestHeader( "Content-Length", request.length);
    	request.send( request);

      },

       firstPageFetched : function(){
       //Parse the Data         
       // Create arr
                    self.controls.grid.pager.initItems(arr,arr.length);
    		self.controls.grid.changePage(0, {refresh:true}); 
       },

        fetchPages : function()
             var request = new XMLHttpRequest();
    	request.onreadystatechange = this.pagesFetched;
    	request.open( "POST", "url", true);
    	request.setRequestHeader( "Content-type", "text/xml; charset=utf-8");
    	request.setRequestHeader( "SOAPAction", "XXXXXXXX");
    	request.setRequestHeader( "Content-Length", request.length);
    	request.send( request);
        }


        pagesFetched : function() {
             // Parse Data
            // Create pagerDataArray
              var dataPager = self.controls.grid.pager.onGotPage({'page':0, 'per_page':5},pagerDataArray, pagerDataArray.length);
    	   log("[LOG]----------------- Data provided :---------" + dataPager);
              // dataPager is displaying as false here.
            
        }
    	{


    onGotPage is returning false. Any clue as to why this is happening?

    Thanks again.
    Report Abuse
    0
  • The dev and deployment enviornment I am using is this :

    WDK : 0.9.7.6
    Framework : 1.2

    I this changes anything...

    Thanks.
    Report Abuse
    0
  • The "fetchPages" function will be passed an object that tells you what pages the pager wants you to fetch. Once the requested pages have been fetched you need to pass the same object to onGotPage(). I noticed that you aren't passing the original parameters to onGotPage().
    Report Abuse
    0
  • Yes. As soon as I wrote the post, I discovered that. So thats got fixed!! Now I am able to get data as I move through the page indicator.
    But, now I am facing another issue !
    I have say a thousand objects to display. So I have these params set
    pageSize : 5,
    fetchSize : 5* 100,
    load : 5,

    I am passing these params to the pager constructor. But, Only max 10 pages are showing. Pager does not go beyond that.
    Cant figure out where I am going wrong. Is there anything I am missing?

    Thanks for your help!
    Report Abuse
    0
  • Do I need to do anything explicitly to refresh the page indicator for the next set of data? or call changePage() again fater onGotPage() ?

    Thanks.
    Report Abuse
    0
  • In initItems you passed the length of the array that was fetched. Instead you're supposed to pass in the number or items there are altogether (ie. the total number that will be in all the pages).
    Report Abuse
    0
  • Thanks a lot d_caveney !!!

    I got pager working at last. Was having some problems with back traversal but that got solved. Thanks a lot for for prompt help throughout.

    Sougata.
    Report Abuse
    0
  • Hi,

    I have your problem about onGotPage commad.
    Could you post your code?

    Thanks
    Michele
    Report Abuse
    0
Ask a Question

Recent Posts

in General - Yahoo! TV Widgets