Anuj @ ColdFusion, Flex and some more….

changing cfgrid pageSize dynamically

Tagged Under : ColdFusion

Here is an example of how to change the pageSize of an AJAX CFFGRID dynamically.

Purpose :-
Let the end user select how many rows of data he/she wants to see in the Grid. (ie technically speaking, change the pageSize on the fly).

Approach :-
1) Add a ComboBoxwith the number of Rows to be selected, for the user to be able to select. use the Ext JS functions to achieve that.
2) Take the value selected from ComboBox and reload the grid data.
3) Reload the paging Toolbar as well because, apparently, the grid data and paging toolbar work independently, reloading the grid does not reload the paging toolbar. So you have to do that manually.
4) Reconfigure the Grid.

Notes :-
Its worth noting that I also made a change to the CFC that gets the data for the grid. The way it works is, if you set the pageSize to lets say 25, and the query returns only 20 rows, the QueryConvertForGrid would still return 25 rows with 5 blank rows. So just a little check in the CFC fixes this.

<cfset var ps = pageSize> <cfquery name="getArtists" datasource="#this.dsn#"> SELECT * FROM Artists <cfif gridsortcolumn neq "" or gridsortdirection neq ""> order by #gridsortcolumn# #gridsortdirection# </cfif> </cfquery> <cfif getArtists.RecordCount LT ps> <cfset ps = getArtists.RecordCount> </cfif> > <cfreturn QueryConvertForGrid(getArtists, page, ps)>

Here is the piece of code that reloads the grid data and updates the paging toolbar.

cb.addListener("select",function(combo,record,index){ // the new pageSize from combobox var numRows = record.data.value; // this line forces the grid to reload data with new pageSize ds.reload({params:{start:0,limit:numRows}}); // the footer paging toolbar still holds old pagesize, so that needs refreshing as well // Create a new Paging Toolbar var paging = new Ext.PagingToolbar(gridFoot,ds,{ pageSize:numRows, //number of records displayed in grid displayInfo:true, // change this to false, if you dont want info displayed displayMsg:'Displaying records {0} - {1} of {2}', emptyMsg:"No records to display" }); // reconfigure the grid grid.reconfigure(ds, grid.getColumnModel()); });

Here is how it looks after all said and done.

Here is the full source code.

| Posted by Anuj Gakhar in ColdFusion

Comments:

12 Responses to “changing cfgrid pageSize dynamically”

1. SitePoint Blogs » The Week in ColdFusion: 26 March-1st April: No fooling here on 3 Apr 2008 at 3:19 pm #
   
   

   [...] finally, my new most favourite tag: CFGRID. Anuj Gakhar shows how to change the CFGRID pageSize attribute dynamically, and Dan Vega shares a nifty select element trick for editable [...]
2. Matt on 29 May 2008 at 4:14 pm #
   
   

   Very cool. I used it not for creating a dynamic selection, but to help me figure out adding the ‘Displaying records {0} - {1} of {2}’ part of CFGRID. I had a problem, however, if the total recordcount was not an even number.

   For example, I had 586 records, and 6 pages of 100. On the last page, it would show ‘Displaying records 501 - 600 of 586′. That seems screwy, so I used your CFC code and added the following:

   It worked just fine.
3. Matt on 29 May 2008 at 4:16 pm #
   
   

   Oops! Here’s the code left out of the previous post (I removed the brackets):

   cfset totalPages = ps * page
   cfif qRead.RecordCount LT totalPages
   cfset ps = qRead.RecordCount - (totalPages - ps)
   cfif
4. Anuj Gakhar on 29 May 2008 at 4:23 pm #
   
   

   @Matt, thanks for your comment. Yes, basically the page number and rowcount parameters are all passed to teh grid from the cfc so have to be controlled via the cfc. The pagingbar itself doesnt do any logic in that context.
5. Mike Ostroskie on 16 Jul 2008 at 6:51 pm #
   
   

   Hi,

   I tried your example and it will not work for me. I am new to Coldfusion and am using CF8 on a MAC.

   The example appears to work until I set the page size to 5 and then use the page next button at the bottom of the grid. It causes the page “1″ of total pages not to update correctly so instead of getting page 2 of what ever I get a page 11 for page 2 and a 111 for a page number and so on as I pres the next record button. when I go back one record the grid displays blanks and all kinds of stuff.

   If I do not select a page size the grid works fine.

   Any ideas as to what I did wrong?

   Thanks,

   Mike
6. Anuj Gakhar on 17 Jul 2008 at 10:42 am #
   
   

   @Mike,

   As far as I remember, I didnt see that happening when I wrote the example. Did you run the exact same code as in the example ?
7. mike ostroskie on 18 Jul 2008 at 12:37 pm #
   
   

   I downloaded the code into a directory and then ran it. I am using the Coldfusion 8 developers version and am running it as a stand alone server using port 8500.

   Could I have a different extJS set of scripts than you do?

   Thanks for your help,

   Mike
8. Anuj Gakhar on 18 Jul 2008 at 2:04 pm #
   
   

   @Mike,

   I just downloaded my own example and ran it, and it worked first time. It looks like your mapping to the /cfide/ folder might not be correct ?
9. Brian on 21 Jul 2008 at 6:53 pm #
   
   

   I have the same issue as Mike (Page x of y issue). I did alot of debugging and trying different approaches, but no luck. It seems like the pagesize used internally in the grid which can be set to a fixed size cannot be altered after the fact and this value appears to be affecting the values even though the actual rows in the grid change and the footer is initially correct. I change it from 10 to 50. It correctly shows “Page 1 of 3″ and “Displaying records 1 - 50 of 109″. Hit the next page button and it says “Page 101 of 3″ and “Displaying records 0501 - 05050 of 109″. Like it is almost appending not adding the increment value. I doubt it is a mapping to the CFIDE folder, but assuming it is, how do I change that? I also tried to essentially wipe out the grid and refresh it entirely when the pagesize value changes (using a global variable to save the number, but that fails too, although I may be doing something wrong there. Any help is appreciated.
10. Brian on 21 Jul 2008 at 7:22 pm #
    
    

    I found the CFIDE folder in the web root on my local drive and checked the administrator and it is mapped correctly: C:\ColdFusion8\wwwroot\CFIDE . I’m just using the built-in Win XP web server for my computer (no Apache, etc.). I tried with IE 6 and FireFox browsers and they are the same.
11. Anuj Gakhar on 22 Jul 2008 at 10:16 am #
    
    

    Hi Brian/Mike,

    Thanks for pointing this out. I spent some time looking into the code and found out the issue actually exists. It was to do with the new pageSize variable which was being treated as a string because I was not doing parseInt on it. So the new line of code looks like this,

    var numRows = parseInt(record.data.value);

    I have also made some other minor changes to the CFC and the file and the link to the source in the post is now updated. You can download the files again.

    Hope that helps!
12. Mike on 22 Jul 2008 at 12:52 pm #
    
    

    Works Great. Thanks!