Working with GXT(Ext GWT) Grid : Add Local Pagination Functionality

In my previous blog i have described how to create a simple Grid of GXT.  I have a plan to write a series of blog about other useful functionalities which can be added to the Grid. Here i write down the way of adding local pagination functionality with the Grid.

Create a new project named GxtPagingExample and add GXT library in the project. To create a grid at first you need a base model class and have to generate data for that model. In this tutorial i have used the same Employee model and TestData class for generating data which i used in my previous blog. You will find the code of these classes there.

Now go to the onModuleLoad method of GxtPagingExample class. Remove all the auto generated code of this method. First create an instance of PagingModelMemoryProxy which is a specialized DataProxy that supports paging when the entire data set is in the memory.

PagingModelMemoryProxy proxy = new PagingModelMemoryProxy(TestData.getEmployees());
   PagingLoader loader = new BasePagingLoader(proxy);
   loader.setRemoteSort(true);
   ListStore<Employee> employeeList = new ListStore<Employee>(loader);  
BasePagingLoader is an implementation of the PagingLoader interface which loads data using the proxy.If remote sort is enable then it will allow you to sort between the whole data set otherwise the sorting will be done only between the viewable data set. Then create a ListStore of Employee type.




Now create a PagingToolBar widget then bind it with the loader. It takes the page size in the constructor.
final PagingToolBar toolBar = new PagingToolBar(5);
   toolBar.bind(loader);
   loader.load(0, 5);
The arguments of the load method of PagingLoader are the begin index and page size.

Create a list of ColumnConfig and define each column. Then create a grid and add the grid and the PagingToolBar in a panel.

List<Columnconfig> configs = new ArrayList<Columnconfig>();

ColumnConfig column = new ColumnConfig();  
column.setId("name");  
column.setHeader("Employee Name");  
column.setWidth(200);  
configs.add(column);

column = new ColumnConfig("department", "Department", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("designation", "Designation", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>"; 
}  
};  
column.setRenderer(checkSalary);  
configs.add(column);

column = new ColumnConfig("joiningdate", "Joining Date", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
configs.add(column);

ColumnModel cm = new ColumnModel(configs);
Grid<Employee> grid = new Grid<Employee>(employeeList, cm); 
grid.setStyleAttribute("borderTop", "none"); 
grid.setAutoExpandColumn("name"); 
grid.setBorders(true); 
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();  
cp.setBodyBorder(false);  
cp.setHeading("Employee List");  
cp.setButtonAlign(HorizontalAlignment.CENTER);  
cp.setLayout(new FitLayout());  
cp.setSize(700, 300); 
cp.add(grid);  
cp.setBottomComponent(toolBar);
RootPanel.get().add(cp);

Explanation of the above code is written here.
That's all. Run the application and test the pagination functionality. To view the live demo of this tutorial Click here.

20 comments:

Oscar Zambotti September 4, 2009 at 5:05 AM  

Hi! Thanks for your tutorial. I have a problem: my local pagination says that I have 800 entries (right) but it displays only the page 1. When I click "next page" I can't see other entries, as if I click "previous page", no data at all. Is there a bug with the [Base]PagingLoader?

Oscar Zambotti September 4, 2009 at 9:03 AM  

I'm sorry, but I found the error :)
loader.setRemoteSort(true)
It was "false" in my code.
Now it works great!

Unknown September 4, 2009 at 9:35 AM  

Thanks Oskar. It is always great to see that people are getting help from my tutorials..

Oscar Zambotti September 7, 2009 at 3:22 AM  

Hi! The problem I told you in the first comment still exists with loader.setRemoteSort(true).

I haven't remote sorting, so I uso this:

loader.setRemoteSort(false);
loader.setSortField("id");
loader.setSortDir(SortDir.ASC);


The table appears, the sorting is right, but when I click "next page" I can't see other entries, as if I click "previous page", no data at all.
But if I click on a column header sorting the fields and THEN I click "next page" all works well. I'm looking for a solution for 3 days on forums and blogs, no way to fix it.

Anonymous September 10, 2009 at 1:06 PM  

thanks for the example. works great for test data. how do i make it work for RPC call. i have to get data from database.

Unknown September 14, 2009 at 12:33 AM  

Oskar, Sorry for late reply. I have set the same properties for the loader like yours and it works fine for me.

Unknown September 14, 2009 at 12:35 AM  

@Anonymous: i will write a tutorial about pagination with rpc call. Thanks for the comment.

Anonymous September 19, 2009 at 4:09 AM  

Hi i have one problem?

The problem is How to reload new set of records store of grid while in existing panel without closing.


ramesh

Unknown September 19, 2009 at 10:50 PM  

@ramesh: just refresh the page and new data will be reloaded automatically.

Anonymous October 3, 2009 at 2:57 PM  

Hi,
Thank you for the tutorial is really great.
But I want to put the paging otherwise:
I have great entries, I want to display each entrie in a decorator panel (or other panel), so it's not like in the tutorial, in a grid, and with simple row.
Have you an idea?
Thank you in advance.
---------------
sorry for my bad expression

Unknown October 13, 2009 at 8:40 PM  

@Anonymous: you can decorate the grid by the setRenderer method of the ColumnConfig. suppose you want to place a colorful div in a grid column. Then write this:

public Object render(ModelData model, String property, ColumnData config,
int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
return "<div style =\"width:100px;height:50px;color:ffffff;background-color:#244665\">model.get("description")</div>";
}

Unknown January 8, 2010 at 9:57 AM  

Performance of a GXT grid even with local pagination performs really badly in IE6 (especially if you are doing special rendering). I know how to go about fixing this issue with GWT, but I was hoping you knew how to render the grid in such a way as to get around the fact that IE6 sucks. In GWT the trick is to build the entire HTML and then shove that into the DOM in one go. Anything equivalent in GXT?

Davo March 22, 2010 at 8:55 AM  

Thanks for putting up the example. I have something similar, except in my case I am using an RpcProxy to fetch the data from the server.

In my case, the data does come back from the server (verified with Firebug that it does), but it never is displayed on the grid. I only get the mask (Loading...) displayed, and that's it.

I've got the loader bound to the PagingToolbar and also to the ListStore, but like I stated above I can't get the data to show on the grid for the life of anything.

Anybody seen this behavior before? Any tips or suggestions?

Thanks!

Dinakar April 14, 2010 at 12:13 PM  

I am unable to use my model bean. The reason being my model object implements BeanModelTag for it to be used in a paging toolbar. The GridCellRenderer, however needs an object that extends the BaseModel. Did you encounter this problem before ?

Unknown April 14, 2010 at 6:52 PM  

@Dinakar: Your model bean can still extend the BaseModel as you implement the BeanModelTag.

Anonymous September 5, 2010 at 6:07 AM  

thanks for your help,
i would like to change the number of displayed record so I put loader.load(0, 10);
so when i execute the projet the number of record change to 10 but when I navigate the number come back to 5.
is there other things to do?
Thanks
Fakhri

Anonymous September 5, 2010 at 6:18 AM  

hi, I find my request
i must change :final PagingToolBar toolBar = new PagingToolBar(10);
Thanks
Fakhri

Unknown September 5, 2010 at 7:42 PM  

@Fakhri: Congrats :)

Anonymous September 29, 2010 at 1:53 PM  

Hi! Thanks for your tutorial. I have a problem: I have a class with a controller:...
loader.addLoadListener(new LoadListener() {
public void loaderLoad(LoadEvent le) {
AppEvent event = new AppEvent(MyEvents.loadStudenti);
event.setData("studentListStore", studentListStore);
forwardToView(psicoterapiaView, event);
}

In my View I create the grid and I use the store to populate it. If I want to use the PagingToolBar, How can I do this? I don't have the loader in the view to bind it, is it right?

Thank in advance
Ranetta

Anonymous November 30, 2011 at 4:21 PM  

Does anyone know if there is a way to only allow numbers in the PagingToolbar input? You can pretty much put anything you want in there but I thought there might be a way to set that input box to say numeric only input.

Thanks.

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers