Directory

← Back

Selection Grid

Add the functionality to Vaadin Grid to focus on a particular row and column and select a range of rows with SHIFT/CTRL Click

Author

Rating

Popularity

500+

Description

The Selection grid component provides support to Vaadin Grid and TreeGrid to:

  • select a range of rows with SHIFT/CTRL Click like Vaadin 7 Table in the default mode
  • focus on a particular row and column and expand the hierarchy if needed

The dataprovider needs to be a in-memory dataprovider for a TreeGrid:

  • TreeDataProvider for a TreeGrid

The component is fetching the data from the server to select an item. If a user selects the first row and shift-clicks on the last row, it will fetch all the rows. That could be a problem if you are using a lazy dataprovider.

Multi select mode

In multiselect mode, a user can select multiple items by clicking them with left mouse button while holding the Ctrl key (or Meta key) pressed. If Ctrl is not held, clicking an item will select it and other selected items are deselected. The user can select a range by selecting an item, holding the Shift key pressed, and clicking another item, in which case all the items between the two are also selected. Multiple ranges can be selected by first selecting a range, then selecting an item while holding Ctrl, and then selecting another item with both Ctrl and Shift pressed. Click on a row will select it. Space on a row will toggle the selection. You can also use Arrow down and Arrow up with Shift/Ctrl.

How to use it

Create a new component SelectionGrid/SelectionTreeGrid and use it like a Grid. The API is quite similar.

Examples

Basic example for a multiselect grid

    public SimpleView() {
        Div messageDiv = new Div();

        List<Person> personList = getItems();
        Grid<Person> grid = new SelectionGrid<>();
        grid.setItems(personList);

        grid.addColumn(Person::getFirstName).setHeader("First Name");
        grid.addColumn(Person::getAge).setHeader("Age");

        grid.setSelectionMode(Grid.SelectionMode.MULTI);

        grid.asMultiSelect().addValueChangeListener(event -> {
            String message = String.format("Selection changed from %s to %s",
                event.getOldValue(), event.getValue());
            messageDiv.setText(message);
        });

        // You can pre-select items
        grid.asMultiSelect().select(personList.get(0), personList.get(1));
        add(grid, messageDiv);
    }

    private List<Person> getItems() {
        PersonService personService = new PersonService();
        return personService.fetchAll();
    }

Focus and scroll on a particular cell

To focus on a particular cell, a new function has been added: focusOnCell that requires an item and a column.

    public FocusGridMultipleColGroupView() {

        List<Person> personList = getItems();
        SelectionGrid<Person> grid = new SelectionGrid<>();
        grid.setItems(personList);

        Grid.Column<Person> firstNameColumn = grid.addColumn(Person::getFirstName).setHeader("First Name").setKey("name");
        Grid.Column<Person> lastNameColumn = grid.addColumn(Person::getLastName).setHeader("Last Name").setKey("lastName");
        grid.addColumn(Person::getAge).setHeader("Age").setKey("age");

        ComboBox<Person> personComboBox = new ComboBox<>();
        personComboBox.addValueChangeListener(item -> {
            if (item.getValue() != null) {
                grid.focusOnCell(item.getValue(), lastNameColumn);
            }
        });
        personComboBox.setItems(personList);

        HeaderRow halfheaderRow = grid.prependHeaderRow();
        halfheaderRow.join(firstNameColumn, lastNameColumn).setText("Names");

        add(personComboBox);
        addAndExpand(grid);
        setPadding(false);
        grid.focusOnCell(personList.get(0), lastNameColumn);

    }

    private List<Person> getItems() {
        PersonService personService = new PersonService();
        return personService.fetchAll();
    }

Focus and scroll on a particular cell in a Treegrid

To focus on a particular cell in a TreeGrid you can use the same function focusOnCell It will expand the parent nodes if they are collapsed, the expand is done node by node and can be slow.


    private DepartmentData departmentData = new DepartmentData();


    public FocusTreeGridView() {

        SelectionTreeGrid<Department> grid = buildGrid();

        ComboBox<Department> personComboBox = new ComboBox<>("Focus");
        personComboBox.addValueChangeListener(item -> {
            if (item.getValue() != null) {
                grid.focusOnCell(item.getValue(),grid.getColumnByKey("name"));
            }
        });
        personComboBox.setItems(departmentData.getDepartments());

        add(personComboBox);

        addAndExpand(grid);
        setPadding(false);
        setSizeFull();
    }

    private SelectionTreeGrid<Department> buildGrid() {
        SelectionTreeGrid<Department> grid = new SelectionTreeGrid<>();
        grid.setItems(departmentData.getRootDepartments(),
            departmentData::getChildDepartments);
        grid.addHierarchyColumn(Department::getName).setHeader("Department Name").setKey("name");
        grid.setWidthFull();
        return grid;
    }

Allowing text selection

By default, text selection is disabled to provide a more appealing visual feedback when selecting multiple rows using shift. The downside of this is, that users cannot select text parts of single rows or cells.

To allow selecting text, simply add the theme variant SelectionGridVariant.SELECTABLE_TEXT to your SelectionGrid instance.

Please note, that the text selection will still be removed, when multiple rows are selected, but, due to technical limitations of event handling there will be a short flickering of selected text.

SelectionGrid<Person> grid = new SelectionGrid<>();
grid.addThemeVariants(SelectionGridVariant.SELECTABLE_TEXT); // allow text selection inside the grid

Demo

You can check the demo here: https://incubator.app.fi/selection-grid-flow-demo/

Missing features or bugs

You can report any issue or missing feature on github: https://github.com/vaadin-component-factory/selection-grid-flow

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code


@Route(value = "focus-htree-grid", layout = MainLayout.class)
public class FocusTreeHorizontalScrollGridView extends VerticalLayout {

    private DepartmentData departmentData = new DepartmentData();

    public FocusTreeHorizontalScrollGridView() {

        ComboBox<Department> departmentComboBox = new ComboBox<>();
        SelectionTreeGrid<Department> grid = buildGrid();

        ComboBox<String> columnsCombobox = new ComboBox<>();
        departmentComboBox.addValueChangeListener(item -> {
            if (item.getValue() != null) {
                Grid.Column<Department> column = (columnsCombobox.getValue() != null)?grid.getColumnByKey(columnsCombobox.getValue()): null;
                grid.focusOnCell(item.getValue(), column);
            }
        });
        departmentComboBox.setItems(departmentData.getDepartments());

        columnsCombobox.addValueChangeListener(item -> {
            if (departmentComboBox.getValue() != null) {
                Grid.Column<Department> column = (columnsCombobox.getValue() != null)?grid.getColumnByKey(columnsCombobox.getValue()): null;
                grid.focusOnCell(departmentComboBox.getValue(), column);
            }
        });
        columnsCombobox.setItems("name","id","parent","manager","manager2","manager3","manager4","manager5","manager6","manager7");
        columnsCombobox.setValue("name");
        add(new HorizontalLayout(departmentComboBox, columnsCombobox));
        addAndExpand(grid);
        setPadding(false);
        setSizeFull();

    }

    private SelectionTreeGrid<Department> buildGrid() {
        SelectionTreeGrid<Department> grid = new SelectionTreeGrid<>();
        grid.setItems(departmentData.getRootDepartments(),
            departmentData::getChildDepartments);
        List<Grid.Column<Department>> columns = new ArrayList<>();
        columns.add(grid.addHierarchyColumn(Department::getName).setHeader("Department Name").setWidth("300px").setKey("name"));
        columns.add(grid.addColumn(Department::getParent).setHeader("Department Parent").setKey("parent"));
        columns.add(grid.addColumn(Department::getId).setHeader("Department Id").setKey("id"));
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager").setKey("manager"));
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager col 2").setKey("manager2"));
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager col 3").setKey("manager3"));
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager col 4").setWidth("300px").setKey("manager4"));
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager col 5").setWidth("300px").setKey("manager5"));
        Grid.Column<Department> manager6 = grid.addColumn(Department::getManager).setHeader("Department Manager col 6").setWidth("300px").setKey(
            "manager6");
        columns.add(grid.addColumn(Department::getManager).setHeader("Department Manager col 7").setWidth("300px").setKey("manager7"));
        columns.add(manager6);
        grid.setWidthFull();
        grid.setColumnReorderingAllowed(true);
        grid.setColumnOrder(columns);
        return grid;
    }
}

@Route(value = "focus-grid", layout = MainLayout.class)
public class FocusGridView extends VerticalLayout {


    public FocusGridView() {

        List<Person> personList = getItems();
        SelectionGrid<Person> grid = new SelectionGrid<>();
        grid.setItems(personList);

        Grid.Column<Person> personColumn = grid.addColumn(Person::getFirstName).setHeader("First Name").setKey("name");
        grid.addColumn(Person::getLastName).setHeader("Last Name");
        grid.addColumn(Person::getAge).setHeader("Age").setKey("age");
        ComboBox<Person> personComboBox = new ComboBox<>();
        personComboBox.addValueChangeListener(item -> {
            if (item.getValue() != null) {
                grid.focusOnCell(item.getValue(), personColumn);
            }
        });
        personComboBox.setItems(personList);

        add(personComboBox);
        addAndExpand(grid);
        setPadding(false);

    }

    private List<Person> getItems() {
        PersonService personService = new PersonService();
        return personService.fetchAll();
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Provide missing selectRangeOnlyOnClick() method for SelectionTreeGrid (#56)
Released
2024-08-08
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 24
Vaadin 14 in 0.0.1
Vaadin 23 in 2.0.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Selection Grid - Vaadin Add-on Directory

Add the functionality to Vaadin Grid to focus on a particular row and column and select a range of rows with SHIFT/CTRL Click Selection Grid - Vaadin Add-on Directory
## Description The Selection grid component provides support to Vaadin Grid and TreeGrid to: * select a range of rows with SHIFT/CTRL Click like Vaadin 7 Table in the default mode * focus on a particular row and column and expand the hierarchy if needed The dataprovider needs to be a in-memory dataprovider for a TreeGrid: * TreeDataProvider for a TreeGrid The component is fetching the data from the server to select an item. If a user selects the first row and shift-clicks on the last row, it will fetch all the rows. That could be a problem if you are using a lazy dataprovider. ### Multi select mode In multiselect mode, a user can select multiple items by clicking them with left mouse button while holding the Ctrl key (or Meta key) pressed. If Ctrl is not held, clicking an item will select it and other selected items are deselected. The user can select a range by selecting an item, holding the Shift key pressed, and clicking another item, in which case all the items between the two are also selected. Multiple ranges can be selected by first selecting a range, then selecting an item while holding Ctrl, and then selecting another item with both Ctrl and Shift pressed. Click on a row will select it. Space on a row will toggle the selection. You can also use Arrow down and Arrow up with Shift/Ctrl. ## How to use it Create a new component SelectionGrid/SelectionTreeGrid and use it like a Grid. The API is quite similar. ## Examples ### Basic example for a multiselect grid ``` public SimpleView() { Div messageDiv = new Div(); List personList = getItems(); Grid grid = new SelectionGrid<>(); grid.setItems(personList); grid.addColumn(Person::getFirstName).setHeader("First Name"); grid.addColumn(Person::getAge).setHeader("Age"); grid.setSelectionMode(Grid.SelectionMode.MULTI); grid.asMultiSelect().addValueChangeListener(event -> { String message = String.format("Selection changed from %s to %s", event.getOldValue(), event.getValue()); messageDiv.setText(message); }); // You can pre-select items grid.asMultiSelect().select(personList.get(0), personList.get(1)); add(grid, messageDiv); } private List getItems() { PersonService personService = new PersonService(); return personService.fetchAll(); } ``` ### Focus and scroll on a particular cell To focus on a particular cell, a new function has been added: focusOnCell that requires an item and a column. ``` public FocusGridMultipleColGroupView() { List personList = getItems(); SelectionGrid grid = new SelectionGrid<>(); grid.setItems(personList); Grid.Column firstNameColumn = grid.addColumn(Person::getFirstName).setHeader("First Name").setKey("name"); Grid.Column lastNameColumn = grid.addColumn(Person::getLastName).setHeader("Last Name").setKey("lastName"); grid.addColumn(Person::getAge).setHeader("Age").setKey("age"); ComboBox personComboBox = new ComboBox<>(); personComboBox.addValueChangeListener(item -> { if (item.getValue() != null) { grid.focusOnCell(item.getValue(), lastNameColumn); } }); personComboBox.setItems(personList); HeaderRow halfheaderRow = grid.prependHeaderRow(); halfheaderRow.join(firstNameColumn, lastNameColumn).setText("Names"); add(personComboBox); addAndExpand(grid); setPadding(false); grid.focusOnCell(personList.get(0), lastNameColumn); } private List getItems() { PersonService personService = new PersonService(); return personService.fetchAll(); } ``` ### Focus and scroll on a particular cell in a Treegrid To focus on a particular cell in a TreeGrid you can use the same function `focusOnCell` It will expand the parent nodes if they are collapsed, the expand is done node by node and can be slow. ``` private DepartmentData departmentData = new DepartmentData(); public FocusTreeGridView() { SelectionTreeGrid grid = buildGrid(); ComboBox personComboBox = new ComboBox<>("Focus"); personComboBox.addValueChangeListener(item -> { if (item.getValue() != null) { grid.focusOnCell(item.getValue(),grid.getColumnByKey("name")); } }); personComboBox.setItems(departmentData.getDepartments()); add(personComboBox); addAndExpand(grid); setPadding(false); setSizeFull(); } private SelectionTreeGrid buildGrid() { SelectionTreeGrid grid = new SelectionTreeGrid<>(); grid.setItems(departmentData.getRootDepartments(), departmentData::getChildDepartments); grid.addHierarchyColumn(Department::getName).setHeader("Department Name").setKey("name"); grid.setWidthFull(); return grid; } ``` ### Allowing text selection By default, text selection is disabled to provide a more appealing visual feedback when selecting multiple rows using shift. The downside of this is, that users cannot select text parts of single rows or cells. To allow selecting text, simply add the theme variant `SelectionGridVariant.SELECTABLE_TEXT` to your SelectionGrid instance. Please note, that the text selection will still be removed, when multiple rows are selected, but, due to technical limitations of event handling there will be a short flickering of selected text. ``` SelectionGrid grid = new SelectionGrid<>(); grid.addThemeVariants(SelectionGridVariant.SELECTABLE_TEXT); // allow text selection inside the grid ``` ## Demo You can check the demo here: https://incubator.app.fi/selection-grid-flow-demo/ ## Missing features or bugs You can report any issue or missing feature on github: https://github.com/vaadin-component-factory/selection-grid-flow ### Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
View on GitHub
Online Demo
Issue tracker

Selection Grid version 0.0.1
First version EXPERIMENTAL

Selection Grid version 0.0.2
Include a temporary fix for the TreeGrid. Treegrid doesn't maintain states when using Tabs https://github.com/vaadin/vaadin-grid/issues/1820

Selection Grid version 0.1.0
* Add shift/Ctrl selection: https://github.com/vaadin-component-factory/selection-grid-flow/issues/4 * Create a new webcomponent to not override the grid behavior: https://github.com/vaadin-component-factory/selection-grid-flow/issues/7 * Selection does not work on TreeGrid : https://github.com/vaadin-component-factory/selection-grid-flow/issues/5

Selection Grid version 0.2.0
Fix two issues: * when click on header row throws an exception * when focus on the first row, does nothing Update the license to Apache2.0

Selection Grid version 0.3.0
Remove a workaround that is fixed in Vaadin 14.4.3+ and breaks the component. If you upgrade your project to Vaadin 14.4.3, use the component verion 0.3.0+. More detail here: https://github.com/vaadin-component-factory/selection-grid-flow/issues/12

Selection Grid version 0.4.0
Add the constructors of the Grid/TreeGrid

Selection Grid version 0.4.1
Allow text selection in the Grid if the theme SELECTABLE_TEXT is set.

Selection Grid version 0.4.2
- Remove necessity for InMemoryDataProvider for TreeGrid - Fix: Multi selection (checkbox) column is shown on reattach

Selection Grid version 0.4.3
Fix Multi selection (checkbox) column is shown on reattach for TreeGrid

Selection Grid version 0.5.0
Compatibility to Vaadin 14.7. Use older version (0.4.3) for Vaadin 14.6-.

Selection Grid version 2.0.0
Version 2.0.0 - Modified to work with Vaadin 23

Selection Grid version 3.0.0
Updated version for Vaadin 24. Use version 2.0.0 for Vaadin 23.

Selection Grid version 3.0.1
#### Bug fixes: * fix selection with shift key and lazy loading ([#40](https://github.com/vaadin-component-factory/selection-grid-flow/issues/40))

Selection Grid version 2.0.1
#### Bug fixes: * fix selection with shift key and lazy loading ([#40](https://github.com/vaadin-component-factory/selection-grid-flow/issues/40))

Selection Grid version 3.0.2
* Fixed a build failure by removing a call to `this._getPageForIndex` ([GitHub issue #47](https://github.com/vaadin-component-factory/selection-grid-flow/issues/47)) * Updated build to use Vaadin 24.3.0 as baseline.

Selection Grid version 3.0.3
### Version 3.0.3 - Re-releasing 3.0.2 with JavaDocs etc.

Selection Grid version 3.0.4
### Version 3.0.4 - Refactor helper.js to use new Grid functions instead of deprecated ones. This also fixes issue of child nodes sometimes not being populated with data.

Selection Grid version 3.0.5
Fix performance issues

Selection Grid version 3.0.6
Minor fix to remove debugger lines

Selection Grid version 3.0.7
* Provide missing selectRangeOnlyOnClick() method for SelectionTreeGrid ([#56](https://github.com/vaadin-component-factory/selection-grid-flow/issues/56))

Online