PrimeFaces Extensions Showcase

Sheet

Create columns dynamically and render their style and other attributes from backing beans. Also demonstrate how to customize the Handsontable instance using "updateSettings" and "extender" Javascript.

Dynamic Columns

Source


<pe:sheet id="sheet" value="#{sheetDynamicController.sheetRows}" var="row" height="400" rowKey="#{row.id}"
              showRowHeaders="true" sortBy="#{row.id}" sortOrder="ascending" width="1000"
              widgetVar="sheetWidget" filteredValue="#{sheetDynamicController.filteredSheetRows}"
              extender="sheetExtender">

        <f:facet name="header">
            <h:outputText value="Dynamic Columns"/>
        </f:facet>

        <pe:sheetcolumn headerText="Id (readOnly)" readOnly="true" value="#{row.id}" colWidth="150"/>
        <c:forEach items="#{sheetDynamicController.hoursOfDay}" var="hourOfDay" varStatus="status">
            <pe:sheetcolumn styleClass="htRight #{row.cells[status.index].style}"
                            headerText="#{hourOfDay}"
                            value="#{row.cells[status.index].value}"
                            readonlyCell="#{row.readOnly}"
                            colType="numeric">
                <f:converter converterId="javax.faces.Integer"/>
            </pe:sheetcolumn>
        </c:forEach>

        <f:facet name="footer">
            <h:outputText value="#{sheetDynamicController.filteredSheetRows.size()} Records"/>
        </f:facet>
    </pe:sheet>

    <style type="text/css">
        .cell-blue {
            color: blue
        }

        .cell-orange {
            color: darkorange
        }
    </style>
    <script type="text/javascript">
        function sheetExtender() {
            // this = widget
            // this.cfg = JSON configuration
            this.cfg.trimWhitespace = true;
        };

        $(document).ready(function () {
            var $hot = PF('sheetWidget').ht;
            $hot.updateSettings({
                contextMenu: {
                    callback: function (key, options) {
                        if (key === 'about') {
                            setTimeout(function () {
                                // timeout is used to make sure the menu collapsed before alert is shown
                                alert("PrimeFaces Extensions Rocks! This is a context menu with default and custom options mixed");
                            }, 100);
                        }
                    },
                    items: {
                        "row_above": {
                            disabled: function () {
                                // if first row, disable this option
                                return $hot.getSelected()[0] === 0;
                            }
                        },
                        "row_below": {},
                        "hsep1": "---------",
                        "remove_row": {
                            name: 'Remove this row, ok?',
                            disabled: function () {
                                // if first row, disable this option
                                return $hot.getSelected()[0] === 0
                            }
                        },
                        "hsep2": "---------",
                        "about": {name: 'About...'}
                    }
                }
            });
        });
    </script>


@Named
@ViewScoped
public class SheetDynamicController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    private List<DynaSheetRow> sheetRows = new ArrayList<>();
    private List<DynaSheetRow> filteredSheetRows = new ArrayList<>();
    private List<Integer> hoursOfDay = new ArrayList<>();

    public SheetDynamicController() {
        addRows(24);
    }

    private void addRows(final int count) {
        for (int i = 0; i < count; i++) {
            final DynaSheetRow row = new DynaSheetRow();
            row.setId(RandomUtils.nextLong());
            row.setReadOnly(false);
            final Integer hourOfDay = Integer.valueOf(i);
            hoursOfDay.add(hourOfDay);
            for (int j = 0; j < count; j++) {
                row.getCells().add(DynaSheetCell.create(Integer.valueOf(j), RandomUtils.nextInt(1, 1000)));
            }
            getSheetRows().add(row);
        }
    }

    public List<DynaSheetRow> getSheetRows() {
        return sheetRows;
    }

    public void setSheetRows(final List<DynaSheetRow> sheetRows) {
        this.sheetRows = sheetRows;
    }

    public List<Integer> getHoursOfDay() {
        return hoursOfDay;
    }

    public void setHoursOfDay(final List<Integer> hoursOfDay) {
        this.hoursOfDay = hoursOfDay;
    }

    public List<DynaSheetRow> getFilteredSheetRows() {
        return filteredSheetRows;
    }

    public void setFilteredSheetRows(final List<DynaSheetRow> filteredSheetRows) {
        this.filteredSheetRows = filteredSheetRows;
    }

}


public class DynaSheetRow implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;
    private List<DynaSheetCell> cells = new ArrayList<>();
    private boolean readOnly;

    /**
     * Gets the {@link #id}.
     *
     * @return Returns the {@link #id}.
     */
    public Long getId() {
        return id;
    }

    /**
     * Sets the {@link #id}.
     *
     * @param id The {@link #id} to set.
     */
    public void setId(final Long id) {
        this.id = id;
    }

    /**
     * Gets the {@link #cells}.
     *
     * @return Returns the {@link #cells}.
     */
    public List<DynaSheetCell> getCells() {
        return cells;
    }

    /**
     * Sets the {@link #cells}.
     *
     * @param cells The {@link #cells} to set.
     */
    public void setCells(final List<DynaSheetCell> cells) {
        this.cells = cells;
    }

    /**
     * Gets the {@link #readOnly}.
     *
     * @return Returns the {@link #readOnly}.
     */
    public boolean isReadOnly() {
        return readOnly;
    }

    /**
     * Sets the {@link #readOnly}.
     *
     * @param readOnly The {@link #readOnly} to set.
     */
    public void setReadOnly(final boolean readOnly) {
        this.readOnly = readOnly;
    }

}


public class DynaSheetCell implements Comparable<DynaSheetCell>, Serializable {

    private static final long serialVersionUID = 1L;

    private Integer value;
    private String style;
    private Integer hourOfDay;

    public static DynaSheetCell create(final Integer hourOfDay, final Integer value) {
        final DynaSheetCell cell = new DynaSheetCell();
        cell.setHourOfDay(hourOfDay);
        cell.setValue(value);
        cell.setStyle(StringUtils.EMPTY);
        if (hourOfDay == 2) {
            cell.setStyle("cell-blue");
        }
        if (hourOfDay == 3) {
            cell.setStyle("cell-orange");
        }
        return cell;
    }

    /**
     * Gets the {@link #hourOfDay}.
     *
     * @return Returns the {@link #hourOfDay}.
     */
    public Integer getHourOfDay() {
        return hourOfDay;
    }

    /**
     * Sets the {@link #hourOfDay}.
     *
     * @param hourOfDay The {@link #hourOfDay} to set.
     */
    public void setHourOfDay(final Integer hourOfDay) {
        this.hourOfDay = hourOfDay;
    }

    /**
     * Gets the {@link #value}.
     *
     * @return Returns the {@link #value}.
     */
    public Integer getValue() {
        return value;
    }

    /**
     * Sets the {@link #value}.
     *
     * @param value The {@link #value} to set.
     */
    public void setValue(final Integer value) {
        this.value = value;
    }

    /**
     * Gets the {@link #style}.
     *
     * @return Returns the {@link #style}.
     */
    public String getStyle() {
        return style;
    }

    /**
     * Sets the {@link #style}.
     *
     * @param style The {@link #style} to set.
     */
    public void setStyle(final String style) {
        this.style = style;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public int compareTo(final DynaSheetCell other) {
        return new CompareToBuilder().append(value, other.value).toComparison();
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public boolean equals(final Object other) {
        if (!(other instanceof DynaSheetCell)) {
            return false;
        }
        final DynaSheetCell castOther = (DynaSheetCell) other;
        return new EqualsBuilder().append(getValue(), castOther.getValue())
                    .append(getHourOfDay(), castOther.getHourOfDay()).isEquals();
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public int hashCode() {
        return new HashCodeBuilder().append(getValue()).append(getHourOfDay())
                    .toHashCode();
    }

}

Use Cases

Documentation

pe:sheet
pe:sheetcolumn

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
binding	An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
converter	An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
converterMessage	Message to display when conversion fails.
currentColClass	The style class to apply dynamically to the selected column.
currentRowClass	The style class to apply dynamically to the selected row.
emptyMessage	The message to be displayed if no records exist in the sheet.
errorMessage	A global error message to be added when the Sheet is invalid. If not specified, no global message is added. If specified, a global message will be added with this value.
filteredValue	List to keep the filtered/sorted data if filtering/sorting is enabled.
maxRows	Maximum number of rows. Default is infinity.
minRows	Minimum number of rows. At least that many of rows will be created during initialization. Default is 0.
maxCols	Maximum number of columns. Default is infinity.
minCols	Minimum number of columns. At least that many of columns will be created during initialization. Default is 0.
fixedCols	The number of columns to fix or freeze on the left when scrolling.
fixedRows	The number of rows to fix or freeze on the top when scrolling.
fixedRowsBottom	The number of rows to fix or freeze on the bottom when scrolling.
locale	The IL8N Locale langauge. Default is en-US.
resizableCols	Allow the columns to be manually resizable. Default to false
resizableRows	Allow the rows to be manually resizable. Default to false
movableCols	Allow the columns to be manually moved. Default to false
movableRows	Allow the rows to be manually moved. Default to false
height	The height of the sheet in pixels. It is recommended you use this property instead of a style class to ensure it is applied to the proper element. This can be left empty, but performance may suffer.
immediate	When set true, process validations logic is executed at apply request values phase for this component. Default is false.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
required	Marks component as required.
requiredMessage	Message to display when required field validation fails.
rowKey	An el expression resolving to a unique key value for each row. Required.
rowStyleClass	The style class to apply each row.
showColumnHeaders	Boolean value to specify the rendering of the column headers.
showRowHeaders	Boolean value to specify the rendering of the row headers.
rowHeader	An el expression resolving to a header for each row. Optional.
readOnly	Boolean value to specify whether the sheet should be rendered as a read only. This is more efficient than cell by cell, but renders the entire sheet as read only.
sortBy	How the sheet rows should be sorted initially. If it is an expression, it must evaluate to the property to be used for sorting - this will not work when columns are specified dynamically. Otherwise, it can also be the ID (without any naming containers prefixed, i.e. no parent elements with colons) of a sheet column by which the sheet rows should be sorted. In this case, you also need to set the sortBy attribute on the sheet column.
sortOrder	Sets sorting order. Default is "ascending". Valid values are "ascending" and "descending".
caseSensitiveSort	Case sensitivity for sorting, insensitive by default.
nullSortOrder	Defines where the null values are placed in ascending sort order. Default value is "1" meaning null values are placed at the end in ascending mode and at beginning in descending mode. Set to "-1" for the opposite behavior.
stretchH	The Handsontable StretchH value. Affects rendering of the column widths. Valid values are "none", "hybrid", "last", "all".
selectionMode	Choose between selecting a single cell, a range of adjacent cells and multiple ranges of non-contiguous cells. Valid values are "single", "multiple", "range".
style	Style of the html container element. Width and Height can be configured here in viewport units
styleClass	The additional style classes for the rendered table. Multiple classes may be specified delimited by a space.
validator	A method expression referring to a method validationg the input.
validatorMessage	Message to display when validation fails.
value	Datasource of the component.
valueChangeListener	A method binding expression referring to a method for handling a valuchangeevent.
var	Name of the iterator variable used to refer each data.
width	The width of the sheet in pixels. For auto width, leave empty.
allowTabOffSheet	Allowing focusing the next component if the sheet is currently on the first or last cell.
tabindex	Position of the element in the tabbing order.
extender	Name of javascript function to extend the options of the underlying Handsontable plugin.
activeHeaderStyleClass	CSS class name for all active headers in selections. The header will be marked with this class name only when a whole column or row will be selected.
commentedCellStyleClass	CSS class name added to the commented cells.
currentColStyleClass	CSS class name for all visible columns in the current selection.
currentHeaderStyleClass	CSS class name for all visible headers in current selection.
currentRowStyleClass	CSS class name for all visible rows in the current selection.
invalidCellStyleClass	CSS class name for cells that did not pass validation.
noWordWrapStyleClass	CSS class name added to cells with cell meta wordWrap: false
placeholderCellStyleClass	CSS class name for cells that have a placeholder in use.
readOnlyCellStyleClass	CSS class name for read-only cells.

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
binding	An el expression referring to a server side UIComponent instance in a backing bean.
colType	The column data entry type. Currently, supports "text", "numeric", "date", "password", "dropdown", "autocomplete", and "checkbox" are experimental.
colWidth	The column width in pixels.
converter	An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
converterMessage	Message to display when conversion fails.
filterBy	Property to be used for filtering.
filterMatchMode	Property to define the filter match mode of startsWith, endsWith, contains, exact.
filterOptions	A collection of selectitems for filter dropdown.
headerText	The header text to display above the column.
immediate	When set true, process validations logic is executed at apply request values phase for this component. Default is false.
passwordHashSymbol	Password mask defaulted to asterisks *. Note that you can't change symbol used by the input field due to browsers limitations.
passwordHashLength	By default every password has length equal to the length of value that it corresponds with. Use this option to set fixed hash length.
numericPattern	Numbers can be formatted to look like currency, percentages, times, or even plain old numbers with decimal places, thousands, and abbreviations.
numericLocale	String or java.util.Locale representing user locale. Default is "en-US".
dateFormat	Moment.js date format for colType="date". Default is "DD/MM/YYYY".
datePickerConfig	JSON config for coltype="date". DatePicker additional options (see https://github.com/dbushell/Pikaday#configuration).
timeFormat	Moment.js time format for colType="date". Default is "h:mm:ss a".
autoCompleteStrict	Boolean value if true, the autocomplete cells will only accept values that are defined in the source array. Default true.
autoCompleteAllowInvalid	Boolean value If true, allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell.
autoCompleteTrimDropdown	Boolean value If true, trims the dropdown to fit the cell size. Default to true.
autoCompleteVisibleRows	Number of rows visible in the autocomplete dropdown.
selectItems	Collection of values to display in colType="dropdown" or "autocomplete".
readOnly	Boolean value to specify whether the column should be rendered as a read only column. This is more efficient than cell by cell, but renders the entire column as read only. The var value may not be referenced.
readonlyCell	Boolean value to specify whether the cell should be rendered as a read only. The EL expression may reference the var value.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
required	Marks component as required.
requiredMessage	Message to display when required field validation fails.
sortBy	Property to be used for sorting.
sortOrder	Sets sorting order. Default is "ascending". Valid values are "ascending" and "descending".
styleClass	The additional style classes for the rendered table cell. Multiple classes may be specified delimited by a space.
trimWhitespace	Defines whether column should trim the whitespace at the beginning and the end of the cell contents. Default Value: true
validator	A method expression referring to a method validationg the input.
validatorMessage	Message to display when validation fails.
value	The value to bind to this column.
valueChangeListener	A method binding expression referring to a method for handling a valuchangeevent.
visible	Controls the visibilty of the column, default is true.
wordWrap	When set to true, the text of the cell content is wrapped if it does not fit in the fixed column width. Default is true.
onvalidate	A Javascript function, regular expression or a string, which will be used in the process of cell validation. If a function is used, be sure to execute the callback argument with either true (callback(true)) if the validation passed or with false (callback(false)), if the validation failed. Note, that this in the function points to the cellProperties object.