Thursday 27 June 2013

Disabling Vaadin combobox's paging

Hello,
    Vaadin has really great Combobox implementation with lot features like filtering, paging, setting input promt, etc. But sometimes you may need to display whole set of item in combobox instead of having paging, this article I'll describe how it can be done.

     From Combox source code you can find that paging can be disabled by setting property pageLength to 0 (com.vaadin.ui.Select line 66):
/**
* Holds value of property pageLength. 0 disables paging.
*/
protected int pageLength = 10;

     Let's try to extend Combobox and set this property to 0:
/**
public class CustomComboBox extends com.vaadin.ui.ComboBox {
    public ComboBox() {
     pageLength = 0;
    }
}
     and use this CustomComboBox in application which display 50 items in it:
/**
public class VaadinComboboxPagingOffApplication extends Application {
 @Override
 public void init() {
  Window mainWindow = new Window("Vaadin Combobox Paging Off Application");
  CustomComboBox cmb = new CustomComboBox();
  
  for (int i = 1; i <= 50; i++) {
   cmb.addItem("Item" + i); 
  }
  
  mainWindow.addComponent(cmb);
  setMainWindow(mainWindow);
 }
}

   As a result you may see that now we have some problem with scrolling these items and some display height problem.


    These issues can be fixed with reimplementing client side of Combobox - com.vaadin.terminal.gwt.client.ui.VFilterSelect.
    1) In SuggestionPopup of VFilterSelect should be added addStyleName("scrollable-combo-paging-off"):
.scrollable-combo-paging-off  {
 max-height: 200px;
 overflow: auto !important;
}
       This will fix issue with scrolling
   
2) Method fixHeightTo in SuggestionMenu of VFilterSelect should be overriden with:
/**
public void fixHeightTo(int pagelenth) {
}
       This will fix issue with display heigth problem


  Don't forget to point CustomComboBox with new client implementation and recompile widgetsets:
/**
@ClientWidget(PagingOffVFilterSelect.class)
public class CustomComboBox extends com.vaadin.ui.ComboBox {
  public ComboBox() {
 pageLength = 0;
  }
}

 Final result:


Note: Filtering will not work with disabled paging (https://vaadin.com/forum/#!/thread/1465090)

Sources you can find here.
  
BR,
Paul Butenko

1 comment:

  1. Based on your solution it is easier to do it this way without recompilimg widget:

    public class ScrollableComboBox extends ComboBox {
    private static final long serialVersionUID = 1L;

    public ScrollableComboBox() {
    setPageLength(0);
    addStyleName("scrollable-combobox");
    }
    }

    and adding to CSS:

    .v-filterselect-suggestpopup-scrollable-combobox {
    max-height: 200px;
    overflow: auto !important;
    }

    ReplyDelete