Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    #16
    I tried an early implementation but didn't worked out too good.

    Anyway most of the code is translated to java but not quite functional, still many TODO's in it.

    If someone would like to improve it, here is the

    GridPager.java
    Code:
    public class GridPager extends VLayout {
    	private class ButtonLabel extends Label {
    		private int pageNum;
    		public String getTitle() {
    			if (GridPager.this.pageNum == pageNum) {return pageNum + "";} else {return "<u>" + this.pageNum + "</u>";}
    		}
    		public int getPageNum() {return pageNum;}
    		public void setPageNum(int pageNum) {this.pageNum = pageNum;}
    	}
    	private int pageSize = 50;
    	private int numPages = 4;
    	private boolean showTotal = true;
    	private int footerHeight = 20;
    	private final ListGrid grid;
    	private HLayout footer;
    	private Label totalLabel;
    	private int pageNum;
    	private ToolStrip pagerControls;
    	private boolean _scrollingGrid;
    	private int pagerButtonWidth = 20;
    	private int groupStart;
    
    	public GridPager(ListGrid listGrid) {
    
    		this.grid = listGrid;
    		grid.setCellHeight(20);
    		grid.setHeaderHeight(22);
    
    		// Allow the listGrid enough space for 1 "page" of data
    		int gridHeight = (grid.getCellHeight() * pageSize) + grid.getHeaderHeight();
    		setHeight(gridHeight + footerHeight);
    		// Observe dataChanged on the grid - if the total number of rows changes
    		// we may need
    		// to rework our pagination
    		grid.addDataArrivedHandler(new DataArrivedHandler() {
    			public void onDataArrived(DataArrivedEvent event) {goToPage(pageNum, true);}
    		});
    
    		// grid shows up at the top of the VLayout
    		addMember(this.grid);
    
    		// create the footer - HLayout to contain controls / totals information
    		makeFooter();
    		addMember(footer);
    
    		// create the total label if appropriate
    		if (showTotal) {
    			makeTotalLabel();
    			footer.addMember(this.totalLabel);
    		}
    
    		// have the paging controls be right-aligned in the footer
    		LayoutSpacer layoutSpacer = new LayoutSpacer();
    		layoutSpacer.setWidth("*");
    		footer.addMember(layoutSpacer);
    
    		// create the pager controls
    		pagerControls = makePagerControls();
    		footer.addMember(pagerControls);
    
    		// always start at page 1
    		goToPage(1, true);
    
    	}
    
    	private Label makeTotalLabel() {
    		totalLabel = new Label() {
    			public String getTitle() {return getTotalLabelTitle();};
    		};
    		// TODO workaround for line below
    		// totalLabel.setProperty("autoDraw", false);
    		totalLabel.setWrap(false);
    		totalLabel.setAlign(Alignment.LEFT);
    		return totalLabel;
    	}
    
    	private String getTotalLabelTitle() {
    		int totalRows = grid.getTotalRows();
    		return "Total Rows:" + totalRows;
    	}
    
    	private HLayout makeFooter() {
    		// Footer: an HLayout containing the 'total' label and the paging
    		// controls
    		footer = new HLayout();
    		// TODO workaround for line below
    		// footer.setProperty("autoDraw", false);
    		footer.setHeight(footerHeight);
    		// footer.setOverflow(Overflow.HIDDEN);
    		footer.setMembersMargin(10);
    		footer.setLayoutLeftMargin(5);
    		footer.setLayoutRightMargin(5);
    		return footer;
    	}
    
    	private ToolStrip makePagerControls() {
    
    		ArrayList<Label> buttons = new ArrayList<Label>();
    		Label label = new Label();
    		// TODO workaround for line below
    		// label.setProperty("autoDraw", false);
    		label.setWidth(this.pagerButtonWidth);
    		label.setContents("&lt;&lt;");
    		label.setAlign(Alignment.CENTER);
    		label.setCursor(Cursor.HAND);
    		label.addClickHandler(new ClickHandler() {
    			public void onClick(ClickEvent event) {
    				previousPages();
    			}
    		});
    		buttons.add(label);
    
    		for (int i = 0; i < numPages; i++) {
    			final ButtonLabel tmpLabel = new ButtonLabel();
    			tmpLabel.setAlign(Alignment.CENTER);
    			// TODO workaround for line below
    			// tmpLabel.setProperty("autoDraw", false);
    			tmpLabel.setCursor(Cursor.HAND);
    			tmpLabel.setWidth(this.pagerButtonWidth);
    			tmpLabel.setPageNum(i + 1);
    			tmpLabel.addClickHandler(new ClickHandler() {
    				public void onClick(ClickEvent event) {
    					goToPage(tmpLabel.getPageNum(), true);
    				}
    			});
    			buttons.add(tmpLabel);
    		}
    		Label label2 = new Label();
    		// TODO workaround for line below
    		// label2.setProperty("autoDraw", false);
    		label2.setContents("&gt;&gt;");
    		label2.setAlign(Alignment.CENTER);
    		label2.setWidth(this.pagerButtonWidth);
    		label2.setCursor(Cursor.HAND);
    		label2.addClickHandler(new ClickHandler() {
    			public void onClick(ClickEvent event) {
    				nextPages();
    			}
    		});
    		buttons.add(label2);
    		ToolStrip toolStrip = new ToolStrip();
    		toolStrip.setWidth(1);
    		toolStrip.setOverflow(Overflow.VISIBLE);
    		toolStrip.setStyleName("normal");
    		toolStrip.setMembers(buttons.toArray(new Label[] {}));
    		// TODO workaround for line below
    		// toolStrip.setProperty("autoDraw", false);
    		return toolStrip;
    	}
    
    	private void goToPage(int pageNum, boolean forceRefresh) {
    		// clamp to the end of the possible set of pages
    		int pages = getTotalPages();
    		if (pageNum > pages) pageNum = pages;
    		if (pageNum < 1) pageNum = 1;
    
    		if (!forceRefresh && this.pageNum == pageNum) return;
    
    		this.pageNum = pageNum;
    		_scrollingGrid = true;
    		// TODO pass line below to java
    		// grid.scrollRecordIntoView((pageNum -1) * this.pageSize, false);
    		_scrollingGrid = false;
    		// update the buttons
    		updatePagerControls();
    	}
    	public void draw() {
    		super.draw();
    		// TODO: pass code below to java
    		// // On an external scroll of the grid, ensure we update our pageNum
    		// info
    		// var body = this.grid.body;
    		// body.addMethods({
    		// scrolled : new Function (this.getID() +
    		// ".listGridScrolled(this.getScrollTop())")
    		// });
    	}
    	private void listGridScrolled(boolean scrollTop) {
    		if (this._scrollingGrid) return;
    		// TODO pass line below to java and uncoment last code
    		// int rowNum = scrollTop / grid.getRowHeight();
    		// each page spans from start (pageNum-1 * pageSize) to start + pageSize
    		int start = (pageNum - 1) * pageSize;
    		int end = start + pageSize;
    
    		// TODO uncoment when we have rowNum
    		// if (rowNum > end || rowNum < start) {
    		// pageNum = (int) Math.ceil(rowNum / pageSize);
    		// updatePagerControls();
    		// }
    	}
    	private int getTotalPages() {
    		int total = this.grid.getTotalRows();
    		int pages = (int) Math.ceil(total / pageSize);
    		// never return zero pages
    		if (pages == 0) pages = 1;
    		return pages;
    	}
    
    	// given a page number, returns the first page in the "group" of pages we
    	// will show in
    	// the navigation controls
    	// We're showing N pages in the pager controls, so we'll always be starting
    	// with
    	// a multiple of N
    	private int getGroupStart(int pageNum) {
    		int groupIndex = (int) (Math.ceil(pageNum / numPages) - 1);
    		int groupStart = 1 + (groupIndex * numPages);
    		// If you're in the "last" group - shift the start if necessary so we
    		// always
    		// show numPages links (unless that would give us a negative value, of
    		// course)
    		groupStart = Math.max(1, Math.min(groupStart, (this.getTotalPages() - (numPages - 1))));
    		return groupStart;
    	}
    
    	private void updatePagerControls() {
    		Canvas[] controls = this.pagerControls.getMembers();
    		int total = this.getTotalPages();
    
    		// if we're already showing a group that contains the page we moved to,
    		// don't shift
    		// groups - confusing UI
    		// [This can happen at the end of pages where we have overlapping
    		// groups]
    		int groupStart;
    		if (this.groupStart <= pageNum && ((this.groupStart + numPages - 1) >= pageNum)) {
    			groupStart = this.groupStart;
    		} else {
    			groupStart = getGroupStart(pageNum);
    		}
    		this.groupStart = groupStart;
    
    		int currentPage = this.groupStart;
    
    		for (int i = 1; i < controls.length - 1; i++) {
    			((ButtonLabel) controls[i]).setPageNum(currentPage);
    			if (currentPage > total)
    				controls[i].hide();
    			else if (!controls[i].isVisible())
    				controls[i].show();
    
    			if (currentPage == pageNum)
    				controls[i].setCursor(Cursor.DEFAULT);
    			else
    				controls[i].setCursor(Cursor.HAND);
    			currentPage += 1;
    		}
    
    		// show / hide the prev next buttons if appropriate
    		if (groupStart == 1)
    			controls[0].hide();
    		else
    			controls[0].show();
    
    		if (groupStart + numPages > total)
    			controls[controls.length - 1].hide();
    		else
    			controls[controls.length - 1].show();
    
    		if (this.footer.isDrawn())
    			this.footer.markForRedraw();
    	}
    
    	private void previousPages() {
    		goToPage(groupStart - 1, true);
    	}
    
    	private void nextPages() {
    		goToPage(groupStart + numPages, true);
    	}
    
    	/**
    	 * pageSize - how many records to show per 'page' of data
    	 * 
    	 * @return
    	 */
    	public int getPageSize() {
    		return pageSize;
    	}
    
    	/**
    	 * pageSize - how many records to show per 'page' of data
    	 * 
    	 * @param pageSize
    	 */
    	public void setPageSize(int pageSize) {
    		this.pageSize = pageSize;
    	}
    
    	/**
    	 * numPages - how many page navigation buttons to show at one time
    	 * 
    	 * @return
    	 */
    	public int getNumPages() {
    		return numPages;
    	}
    
    	/**
    	 * numPages - how many page navigation buttons to show at one time
    	 * 
    	 * @param numPages
    	 */
    	public void setNumPages(int numPages) {
    		this.numPages = numPages;
    	}
    
    	/**
    	 * showTotal - should the total number of rows be displayed in the footer
    	 * 
    	 * @return
    	 */
    	public boolean getShowTotal() {
    		return showTotal;
    	}
    
    	/**
    	 * showTotal - should the total number of rows be displayed in the footer
    	 * 
    	 * @param showTotal
    	 */
    	public void setShowTotal(boolean showTotal) {
    		this.showTotal = showTotal;
    	}
    
    	/**
    	 * Footer - will contain total label and page navigation controls
    	 * 
    	 * @return
    	 */
    	public int getFooterHeight() {
    		return footerHeight;
    	}
    
    	/**
    	 * Footer - will contain total label and page navigation controls
    	 * 
    	 * @param footerHeight
    	 */
    	public void setFooterHeight(int footerHeight) {
    		this.footerHeight = footerHeight;
    	}
    
    }

    Comment


      #17
      and the test I used:

      EntryPoint.java
      Code:
      import com.google.gwt.core.client.EntryPoint;
      import com.smartgwt.client.types.Overflow;
      import com.smartgwt.client.widgets.grid.ListGrid;
      import com.smartgwt.client.widgets.grid.ListGridField;
      import com.smartgwt.client.widgets.grid.ListGridRecord;
      
      
      /**
       * Entry point classes define <code>onModuleLoad()</code>.
       */
      public class MyEntry implements EntryPoint {
      
      
      	public void onModuleLoad() {
      
      		final ListGrid countryGrid = new ListGrid();  
      		countryGrid.setWidth(350);  
      		countryGrid.setHeight(224);  
      		countryGrid.setAlternateRecordStyles(true);
      		countryGrid.setBodyOverflow(Overflow.HIDDEN);
      
      		ListGridField countryCodeField = new ListGridField("countryCode", "Code", 40);  
      		ListGridField nameField = new ListGridField("countryName", "Country", 120);  
      		ListGridField capitalField = new ListGridField("capital", "Capital");  
      
      		countryGrid.setFields(countryCodeField, nameField, capitalField);  
      		countryGrid.setCanResizeFields(true);  
      		countryGrid.setData(createListGridRecords(countryRecords));  
      
      //		countryGrid.draw();  
      		GridPager gridPager = new GridPager(countryGrid);
      		gridPager.setPageSize(9);
      		gridPager.setNumPages(3);
      		gridPager.draw();
      	}
      
      	public ListGridRecord[] createListGridRecords(String[] records) {  
      		ListGridRecord[] result = new ListGridRecord[records.length - 1];  
      		String[] fieldNames = records[0].split(";");  
      		for (int recordIndex = 1; recordIndex < records.length; ++recordIndex) {  
      			String[] fieldValues = records[recordIndex].split(";");  
      			result[recordIndex - 1] = new ListGridRecord();  
      			for (int fieldIndex = 0; fieldIndex < fieldValues.length; ++fieldIndex) {  
      				result[recordIndex - 1].setAttribute(fieldNames[fieldIndex], fieldValues[fieldIndex]);  
      			}  
      		}  
      		return result;  
      	} // createListGridRecords()  
      
      	private static final String[] countryRecords = new String[] {  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome",  
      		"RS;Russia;Moscow",  
      		"BR;Brazil;Brasilia",  
      		"CA;Canada;Ottawa",  
      		"MX;Mexico;Mexico (Distrito Federal)",  
      		"SP;Spain;Madrid",  
      		"KS;South Korea;Seoul",  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome",  
      		"RS;Russia;Moscow",  
      		"BR;Brazil;Brasilia",  
      		"CA;Canada;Ottawa",  
      		"MX;Mexico;Mexico (Distrito Federal)",  
      		"SP;Spain;Madrid",  
      		"KS;South Korea;Seoul",  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome",  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome",  
      		"RS;Russia;Moscow",  
      		"BR;Brazil;Brasilia",  
      		"CA;Canada;Ottawa",  
      		"MX;Mexico;Mexico (Distrito Federal)",  
      		"SP;Spain;Madrid",  
      		"KS;South Korea;Seoul",  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome",  
      		"RS;Russia;Moscow",  
      		"BR;Brazil;Brasilia",  
      		"CA;Canada;Ottawa",  
      		"MX;Mexico;Mexico (Distrito Federal)",  
      		"SP;Spain;Madrid",  
      		"KS;South Korea;Seoul",  
      		"countryCode;countryName;capital",  
      		"US;United States;Washington, DC",  
      		"CH;China;Beijing",  
      		"JA;Japan;Tokyo",  
      		"IN;India;New Delhi",  
      		"GM;Germany;Berlin",  
      		"UK;United Kingdom;London",  
      		"FR;France;Paris",  
      		"IT;Italy;Rome"
      	}; 
      
      }

      Comment


        #18
        I will try the implementation to see whether I can improve/contribute it

        Comment


          #19
          Simplified GridPager

          Hi,all
          I implemented a simplified GridPager based on Code from maihai007.
          Code:
          import com.smartgwt.client.types.Alignment;
          import com.smartgwt.client.types.Cursor;
          import com.smartgwt.client.types.Overflow;
          import com.smartgwt.client.widgets.Label;
          import com.smartgwt.client.widgets.events.ClickEvent;
          import com.smartgwt.client.widgets.events.ClickHandler;
          import com.smartgwt.client.widgets.events.DrawEvent;
          import com.smartgwt.client.widgets.events.DrawHandler;
          import com.smartgwt.client.widgets.grid.ListGrid;
          import com.smartgwt.client.widgets.grid.events.DataArrivedEvent;
          import com.smartgwt.client.widgets.grid.events.DataArrivedHandler;
          import com.smartgwt.client.widgets.toolbar.ToolStrip;
          
          public class GridPager extends ToolStrip
          {
          
          	// ---------------------- interal state
          	/**
          	 * How many row in each pager.
          	 */
          	private int pageSize = 50;
          	/**
          	 * Current page.
          	 */
          	private int pageNum;
          	/**
          	 * The actual grid.
          	 */
          	private final ListGrid grid;
          
          	// visual component
          	private Label firstLabel;
          	private Label nextLabel;
          	private Label previousLabel;
          	private Label lastLabel;
          	private Label totalLabel;
          
          	public GridPager(ListGrid listGrid, int pageSize)
          	{
          		this(listGrid, pageSize, 20, 22);
          	}
          
          	/**
          	 * 
          	 * @param listGrid
          	 *            the listGrid
          	 * @param pageSize
          	 *            how many rows in each page.
          	 * @param cellHeight
          	 *            cellHeight for the listGrid.
          	 * @param headerHeight
          	 *            headerHeight for the listGrid.
          	 */
          	public GridPager(ListGrid listGrid, int pageSize, int cellHeight, int headerHeight)
          	{
          		this.grid = listGrid;
          		this.pageSize = pageSize;
          
          		firstLabel = new Label();
          		firstLabel.setWidth(50);
          		firstLabel.setStyleName("fakelink");
          		firstLabel.setContents("First");
          		firstLabel.addClickHandler(new ClickHandler()
          		{
          			public void onClick(ClickEvent event)
          			{
          				goToPage(1);
          			}
          		});
          
          		previousLabel = new Label();
          		previousLabel.setWidth(20);
          		previousLabel.setContents("&lt;&lt;");
          		previousLabel.setStyleName("fakelink");
          		previousLabel.addClickHandler(new ClickHandler()
          		{
          			public void onClick(ClickEvent event)
          			{
          				goToPage(pageNum - 1);
          			}
          		});
          
          		nextLabel = new Label();
          		nextLabel.setContents("&gt;&gt;");
          		nextLabel.setWidth(20);
          		nextLabel.setStyleName("fakelink");
          		nextLabel.addClickHandler(new ClickHandler()
          		{
          			public void onClick(ClickEvent event)
          			{
          				goToPage(pageNum + 1);
          			}
          		});
          
          		lastLabel = new Label();
          		lastLabel.setWidth(40);
          		lastLabel.setStyleName("fakelink");
          		lastLabel.setContents("Last");
          		lastLabel.addClickHandler(new ClickHandler()
          		{
          			public void onClick(ClickEvent event)
          			{
          				goToPage(getTotalPages());
          			}
          		});
          
          		totalLabel = new Label();
          		totalLabel.setWrap(false);
          		totalLabel.setWidth(50);
          
          		setHeight(20);
          		setOverflow(Overflow.VISIBLE);
          		setStyleName("normal");
          		addMember(firstLabel);
          		addMember(previousLabel);
          		addMember(nextLabel);
          		addMember(lastLabel);
          		addMember(totalLabel);
          		setAlign(Alignment.RIGHT);
          
          		// --------------set grid height
          		grid.setCellHeight(cellHeight);
          		grid.setHeaderHeight(headerHeight);
          		grid.setHeight(cellHeight * pageSize + headerHeight);
          
          		// listen grid events
          		grid.addDataArrivedHandler(new DataArrivedHandler()
          		{
          			public void onDataArrived(DataArrivedEvent event)
          			{
          				goToPage(pageNum);
          			}
          		});
          		grid.addDrawHandler(new DrawHandler()
          		{
          
          			public void onDraw(DrawEvent event)
          			{
          				goToPage(1);
          
          			}
          		});
          
          	}
          
          	public void goToPage(int pageNum)
          	{
          		// clamp to the end of the possible set of pages
          		int pages = getTotalPages();
          		if (pageNum > pages)
          			pageNum = pages;
          		if (pageNum < 1)
          			pageNum = 1;
          
          		if (pageNum == this.pageNum)
          		{
          			updatePagerControls(pages);
          			return;
          		}
          		// update the buttons
          		this.pageNum = pageNum;
          		updatePagerControls(pages);
          		grid.deselectAllRecords();
          		int cellHeight = grid.getCellHeight();
          		int rowNum = (pageNum - 1) * pageSize;
          		// here: give extra 2 pixes. This is a hack. Otherwise,
          		// listGrid think the last row from previous page is visible although it
          		// is not visible
          		grid.scrollBodyTo(null, rowNum * cellHeight + 2);
          	}
          
          	private int getTotalPages()
          	{
          		int total = this.grid.getTotalRows();
          		int pages = (int) Math.ceil(((float) total) / ((float) pageSize));
          		// never return zero pages
          		if (pages == 0)
          			pages = 1;
          		return pages;
          	}
          
          	protected void updatePagerControls(int total)
          	{
          		if (pageNum == 1)
          		{
          			firstLabel.hide();
          			previousLabel.hide();
          		} else
          		{
          			firstLabel.show();
          			previousLabel.show();
          		}
          		if (pageNum == total)
          		{
          			lastLabel.hide();
          			nextLabel.hide();
          		} else
          		{
          			lastLabel.show();
          			nextLabel.show();
          		}
          
          		totalLabel.setContents("(" + pageNum + "/" + total + ")");
          
          	}
          
          }
          Test case is attached.
          Attached Files
          Last edited by jasonzhang2002; 16 Jun 2009, 16:29.

          Comment


            #20
            Great, can you post a screenshot?

            Thanks,
            Sanjiv

            Comment


              #21
              Screenshots are attached
              Attached Files

              Comment


                #22
                I improved my implementation slightly. TestCase is attached.
                This implementation has several issues:
                1. selection issue. If the grid is
                setSelectionType(SelectionStyle.SIMPLE);
                setSelectionAppearance(SelectionAppearance.CHECKBOX);

                clicking the checkbox header will select the whole grid instead of the current grid.

                A workaround is posted here: http://code.google.com/p/smartgwt/issues/detail?id=257

                2. last page. Suppose the last page has 5 records and the page size is 10, the last page will display the last 10 records instead of the last 5 as is expected. I guess it is related to how grid.scrollBodyTo() is implemented. Does anyone know a workaround?

                3. cache issue. It seems that the list grid caches all data loaded. There will be a performance hit if the grid is big.

                Any suggestion are appreciated.


                Code:
                package person.jason.test.client;
                
                import com.google.gwt.core.client.GWT;
                import com.smartgwt.client.types.Alignment;
                import com.smartgwt.client.types.Overflow;
                import com.smartgwt.client.widgets.Label;
                import com.smartgwt.client.widgets.events.ClickEvent;
                import com.smartgwt.client.widgets.events.ClickHandler;
                import com.smartgwt.client.widgets.form.DynamicForm;
                import com.smartgwt.client.widgets.form.fields.TextItem;
                import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
                import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
                import com.smartgwt.client.widgets.grid.ListGrid;
                import com.smartgwt.client.widgets.grid.events.DataArrivedEvent;
                import com.smartgwt.client.widgets.grid.events.DataArrivedHandler;
                import com.smartgwt.client.widgets.toolbar.ToolStrip;
                
                public class GridPager extends ToolStrip
                {
                
                	boolean deselect=true;
                	
                	public boolean isDeselect()
                	{
                		return deselect;
                	}
                
                	public void setDeselect(boolean deselect)
                	{
                		this.deselect = deselect;
                	}
                
                	// ---------------------- interal state
                	/**
                	 * How many row in each pager.
                	 */
                	private int pageSize = 50;
                	/**
                	 * Current page.
                	 */
                	private int pageNum;
                	/**
                	 * The actual grid.
                	 */
                	private final ListGrid grid;
                
                	// visual component
                	protected Label firstLabel;
                	protected Label nextLabel;
                	DynamicForm pageForm;
                	protected TextItem pageText;
                	protected Label previousLabel;
                	protected Label lastLabel;
                	protected Label totalLabel;
                
                	
                	
                	public GridPager(ListGrid listGrid, int pageSize)
                	{
                		this(listGrid, pageSize, 20, 22);
                	}
                
                	/**
                	 * 
                	 * @param listGrid
                	 *            the listGrid
                	 * @param pageSize
                	 *            how many rows in each page.
                	 * @param cellHeight
                	 *            cellHeight for the listGrid.
                	 * @param headerHeight
                	 *            headerHeight for the listGrid.
                	 */
                	public GridPager(ListGrid listGrid, int pageSize, int cellHeight, int headerHeight)
                	{
                		this.grid = listGrid;
                		this.pageSize = pageSize;
                
                		firstLabel = new Label();
                		firstLabel.setWidth(40);
                		firstLabel.setStyleName("fakelink");
                		firstLabel.setContents("First");
                		firstLabel.addClickHandler(new ClickHandler()
                		{
                			public void onClick(ClickEvent event)
                			{
                				goToPage(1);
                			}
                		});
                
                		previousLabel = new Label();
                		previousLabel.setWidth(20);
                		previousLabel.setContents("&lt;&lt;");
                		previousLabel.setStyleName("fakelink");
                		previousLabel.addClickHandler(new ClickHandler()
                		{
                			public void onClick(ClickEvent event)
                			{
                				goToPage(pageNum - 1);
                			}
                		});
                
                		pageText = new TextItem();
                		pageText.setWidth(30);
                		pageText.setShowTitle(false);
                		pageText.addChangedHandler(new ChangedHandler()
                		{
                
                			public void onChanged(ChangedEvent event)
                			{
                				if (event.getValue() != null)
                				{
                					int value = Integer.parseInt(event.getValue().toString());
                					goToPage(value);
                				}
                			}
                		});
                
                		nextLabel = new Label();
                		nextLabel.setContents("&gt;&gt;");
                		nextLabel.setWidth(20);
                		nextLabel.setStyleName("fakelink");
                		nextLabel.addClickHandler(new ClickHandler()
                		{
                			public void onClick(ClickEvent event)
                			{
                				goToPage(pageNum + 1);
                			}
                		});
                
                		lastLabel = new Label();
                		lastLabel.setWidth(40);
                		lastLabel.setStyleName("fakelink");
                		lastLabel.setContents("Last");
                		lastLabel.addClickHandler(new ClickHandler()
                		{
                			public void onClick(ClickEvent event)
                			{
                				goToPage(getTotalPages());
                			}
                		});
                
                		totalLabel = new Label();
                		totalLabel.setWrap(false);
                		totalLabel.setWidth(50);
                
                		setHeight(20);
                		setOverflow(Overflow.VISIBLE);
                		setStyleName("normal");
                
                		pageForm = new DynamicForm();
                		pageForm.setNumCols(1);
                		pageForm.setFields(pageText);
                		pageForm.setWidth(30);
                
                		addMember(firstLabel);
                		addMember(previousLabel);
                
                		addMember(pageForm);
                		addMember(nextLabel);
                		addMember(lastLabel);
                		addMember(totalLabel);
                		setAlign(Alignment.RIGHT);
                
                		// --------------set grid height
                		grid.setCellHeight(cellHeight);
                		grid.setHeaderHeight(headerHeight);
                		grid.setHeight(cellHeight * pageSize + headerHeight);
                		grid.setBodyOverflow(Overflow.HIDDEN);
                		grid.setDataPageSize(pageSize);
                		grid.setDrawAheadRatio(2.0f);
                		// listen grid events
                		grid.addDataArrivedHandler(new DataArrivedHandler()
                		{
                			public void onDataArrived(DataArrivedEvent event)
                			{
                				GWT.log("onDataArrived is called", null);
                				goToPage(pageNum);
                			}
                		});
                		// grid.addDrawHandler(new DrawHandler()
                		// {
                		//
                		// public void onDraw(DrawEvent event)
                		// {
                		// goToPage(1);
                		//
                		// }
                		// });
                
                	}
                
                	public void goToPage(int pageNum)
                	{
                		GWT.log("go to page " + pageNum, null);
                		// clamp to the end of the possible set of pages
                		int pages = getTotalPages();
                		if (pageNum > pages)
                			pageNum = pages;
                		if (pageNum < 1)
                			pageNum = 1;
                
                		if (pageNum == this.pageNum)
                		{
                			updatePagerControls(pages);
                			return;
                		}
                		// update the buttons
                		this.pageNum = pageNum;
                		updatePagerControls(pages);
                		if (deselect)
                			grid.deselectAllRecords();
                		int cellHeight = grid.getCellHeight();
                		int rowNum = (pageNum - 1) * pageSize;
                
                		// here: give extra 2 pixes. This is a hack. Otherwise,
                		// listGrid think the last row from previous page is visible although it
                		// is not visible
                		grid.scrollBodyTo(null, rowNum * cellHeight + 2);
                
                	}
                
                	private int getTotalPages()
                	{
                		int total = this.grid.getTotalRows();
                		int pages = (int) Math.ceil(((float) total) / ((float) pageSize));
                		// never return zero pages
                		if (pages == 0)
                			pages = 1;
                		return pages;
                	}
                
                	protected void updatePagerControls(int total)
                	{
                		// pageText.setValue(pageNum);
                		if (pageNum == 1)
                		{
                			if (firstLabel.isVisible())
                				firstLabel.hide();
                			if (previousLabel.isVisible())
                				previousLabel.hide();
                		} else
                		{
                			if (!firstLabel.isVisible())
                				firstLabel.show();
                			if (!previousLabel.isVisible())
                				previousLabel.show();
                		}
                		if (pageNum == total)
                		{
                			if (lastLabel.isVisible())
                
                				lastLabel.hide();
                			if (nextLabel.isVisible())
                				nextLabel.hide();
                		} else
                		{
                			if (!lastLabel.isVisible())
                				lastLabel.show();
                			if (!nextLabel.isVisible())
                				nextLabel.show();
                		}
                		if (total >= 4)
                		{
                			if (!pageForm.isVisible())
                				pageForm.show();
                		} else
                		{
                			if (pageForm.isVisible())
                				pageForm.hide();
                		}
                
                		totalLabel.setContents("(" + pageNum + "/" + total + ")");
                
                	}
                
                }
                Attached Files

                Comment


                  #23
                  The famfamfam silk iconset has neat icons for next / previous / first / last that will improve the display..

                  Comment


                    #24
                    My GridPager works fine in my test case. However, it does not work in real case. "Next" shows an empty page. "Reload" only show "loading data". This kind of behavior is observed for IE7. FF3 seems fine
                    Fixed the IE7 issue by changing the DataArriveHandler
                    Code:
                    grid.addDataArrivedHandler(new DataArrivedHandler()
                    		{
                    			public void onDataArrived(DataArrivedEvent event)
                    			{
                    				if (grid.isDrawn())
                    					//GWT.log("onDataArrived is called", null);
                    					goToPage(pageNum);
                    			}
                    		});
                    Last edited by jasonzhang2002; 18 Jun 2009, 15:45.

                    Comment


                      #25
                      Originally posted by sjivan
                      The famfamfam silk iconset has neat icons for next / previous / first / last that will improve the display..
                      Not sure what icon your are referring. Can you give me more information?

                      I can commit the code to smartgwt-extension if you think it is useful.

                      thanks
                      -jason

                      Comment


                        #26
                        Originally posted by jasonzhang2002
                        Not sure what icon your are referring. Can you give me more information?

                        I can commit the code to smartgwt-extension if you think it is useful.

                        thanks
                        -jason
                        nice icons instead of the First << >> Last text
                        http://www.famfamfam.com/lab/icons/silk/

                        Comment


                          #27
                          jasonzhang2002,
                          I think this feature is very useful. Please commit GridPager to smartgwt-extensions.

                          Comment


                            #28
                            Hi,
                            Suppose the last page has 5 records and the page size is 10, the last page will display the last 10 records instead of the last 5..

                            Could you please suggest how to handle the same.

                            Comment


                              #29
                              this component doesnt work! because when we have more columns than the static width the data is hidden because the grid hav this property
                              grid.setBodyOverflow(Overflow.HIDDEN);

                              example:
                              a grid with 20 columns... normaly maybe some 7 colmuns will be visible the other is hidden (grid.setBodyOverflow(Overflow.HIDDEN);)

                              Comment


                                #30
                                Originally posted by jamesjara
                                this component doesnt work! because when we have more columns than the static width the data is hidden because the grid hav this property
                                grid.setBodyOverflow(Overflow.HIDDEN);

                                example:
                                a grid with 20 columns... normaly maybe some 7 colmuns will be visible the other is hidden (grid.setBodyOverflow(Overflow.HIDDEN);)
                                How can we resolve this problem? Or will smartGWT 2.4 have default component like this one?

                                Comment

                                Working...
                                X