Examples with Grid com.vaadin.flow.component.grid.Grid used on opensource projects

Example 11 with Grid

use of com.vaadin.flow.component.grid.Grid in project flow-components by vaadin.

the class GridViewEditorPage method createNotBufferedDynamicEditor.

private void createNotBufferedDynamicEditor() {
    Div message = new Div();
    message.setId("not-buffered-dynamic-editor-msg");
    Grid<Person> grid = new Grid<>();
    List<Person> persons = new ArrayList<>();
    persons.addAll(createItems());
    grid.setItems(persons);
    Column<Person> nameColumn = grid.addColumn(Person::getFirstName).setHeader("Name");
    Column<Person> subscriberColumn = grid.addColumn(Person::isSubscriber).setHeader("Subscriber");
    Column<Person> emailColumn = grid.addColumn(Person::getEmail).setHeader("E-mail");
    Binder<Person> binder = new Binder<>(Person.class);
    Editor<Person> editor = grid.getEditor();
    editor.setBinder(binder);
    TextField field = new TextField();
    // Close the editor in case of backward navigation between components
    field.getElement().addEventListener("keydown", event -> grid.getEditor().closeEditor()).setFilter("event.key === 'Tab' && event.shiftKey");
    binder.bind(field, "firstName");
    nameColumn.setEditorComponent(field);
    Checkbox checkbox = new Checkbox();
    binder.bind(checkbox, "subscriber");
    subscriberColumn.setEditorComponent(checkbox);
    // Close the editor in case of forward navigation between components
    checkbox.getElement().addEventListener("keydown", event -> {
        if (!checkbox.getValue()) {
            grid.getEditor().closeEditor();
        }
    }).setFilter("event.key === 'Tab' && !event.shiftKey");
    TextField emailField = new TextField();
    emailColumn.setEditorComponent(item -> {
        if (item.isSubscriber()) {
            binder.bind(emailField, "email");
            return emailField;
        } else {
            return null;
        }
    });
    // Close the editor in case of forward navigation between components
    emailField.getElement().addEventListener("keydown", event -> grid.getEditor().closeEditor()).setFilter("event.key === 'Tab' && !event.shiftKey");
    grid.addItemDoubleClickListener(event -> {
        grid.getEditor().editItem(event.getItem());
        field.focus();
    });
    // Re-validates the editors every time something changes on the Binder.
    // This is needed for the email column to turn into nothing when the
    // checkbox is deselected, for example.
    binder.addValueChangeListener(event -> {
        // Only updates from the client-side should be taken into account
        if (event.isFromClient()) {
            grid.getEditor().refresh();
        }
    });
    grid.addItemClickListener(event -> {
        if (binder.getBean() != null) {
            message.setText(binder.getBean().getFirstName() + ", " + binder.getBean().isSubscriber() + ", " + binder.getBean().getEmail());
        }
    });
    grid.setId("not-buffered-dynamic-editor");
    addCard("Grid Editor", "Dynamic Editor in Not Buffered Mode", message, grid);
}

Example 12 with Grid

use of com.vaadin.flow.component.grid.Grid in project flow-components by vaadin.

the class GridViewEditorPage method createNotBufferedEditor.

private void createNotBufferedEditor() {
    Div message = new Div();
    message.setId("not-buffered-editor-msg");
    Grid<Person> grid = new Grid<>();
    List<Person> persons = getItems();
    grid.setItems(persons);
    Column<Person> nameColumn = grid.addColumn(Person::getFirstName).setHeader("Name");
    Column<Person> subscriberColumn = grid.addColumn(Person::isSubscriber).setHeader("Subscriber");
    Binder<Person> binder = new Binder<>(Person.class);
    grid.getEditor().setBinder(binder);
    TextField field = new TextField();
    // Close the editor in case of backward between components
    field.getElement().addEventListener("keydown", event -> grid.getEditor().closeEditor()).setFilter("event.key === 'Tab' && event.shiftKey");
    binder.bind(field, "firstName");
    nameColumn.setEditorComponent(field);
    Checkbox checkbox = new Checkbox();
    binder.bind(checkbox, "subscriber");
    subscriberColumn.setEditorComponent(checkbox);
    // Close the editor in case of forward navigation between
    checkbox.getElement().addEventListener("keydown", event -> grid.getEditor().closeEditor()).setFilter("event.key === 'Tab' && !event.shiftKey");
    grid.addItemDoubleClickListener(event -> {
        grid.getEditor().editItem(event.getItem());
        field.focus();
    });
    grid.addItemClickListener(event -> {
        if (binder.getBean() != null) {
            message.setText(binder.getBean().getFirstName() + ", " + binder.getBean().isSubscriber());
        }
    });
    grid.setId("not-buffered-editor");
    addCard("Grid Editor", "Editor in Not Buffered Mode", message, grid);
}

Example 13 with Grid

use of com.vaadin.flow.component.grid.Grid in project flow-components by vaadin.

the class GridViewFilteringPage method createGridWithFilters.

private void createGridWithFilters() {
    Grid<Person> grid = new Grid<>();
    ListDataProvider<Person> dataProvider = new ListDataProvider<>(createItems());
    grid.setDataProvider(dataProvider);
    List<ValueProvider<Person, String>> valueProviders = new ArrayList<>();
    valueProviders.add(Person::getFirstName);
    valueProviders.add(person -> String.valueOf(person.getAge()));
    valueProviders.add(person -> person.getAddress().getStreet());
    valueProviders.add(person -> String.valueOf(person.getAddress().getPostalCode()));
    Iterator<ValueProvider<Person, String>> iterator = valueProviders.iterator();
    grid.addColumn(iterator.next()).setHeader("Name");
    grid.addColumn(iterator.next()).setHeader("Age");
    grid.addColumn(iterator.next()).setHeader("Street");
    grid.addColumn(iterator.next()).setHeader("Postal Code");
    HeaderRow filterRow = grid.appendHeaderRow();
    Iterator<ValueProvider<Person, String>> iterator2 = valueProviders.iterator();
    grid.getColumns().forEach(column -> {
        TextField field = new TextField();
        ValueProvider<Person, String> valueProvider = iterator2.next();
        field.addValueChangeListener(event -> dataProvider.addFilter(person -> StringUtils.containsIgnoreCase(valueProvider.apply(person), field.getValue())));
        field.setValueChangeMode(ValueChangeMode.EAGER);
        filterRow.getCell(column).setComponent(field);
        field.setSizeFull();
        field.setPlaceholder("Filter");
    });
    grid.setId("grid-with-filters");
    addCard("Filtering", "Using text fields for filtering items", grid);
}

Example 14 with Grid

use of com.vaadin.flow.component.grid.Grid in project flow-components by vaadin.

the class GridViewHeaderAndFooterRowsPage method createGridWithHeaderAndFooterRows.

private void createGridWithHeaderAndFooterRows() {
    Grid<Person> grid = new Grid<>();
    grid.setItems(createItems());
    Column<Person> nameColumn = grid.addColumn(Person::getFirstName).setHeader("Name").setComparator((p1, p2) -> p1.getFirstName().compareToIgnoreCase(p2.getFirstName()));
    Column<Person> ageColumn = grid.addColumn(Person::getAge, "age").setHeader("Age");
    Column<Person> streetColumn = grid.addColumn(person -> person.getAddress().getStreet()).setHeader("Street");
    Column<Person> postalCodeColumn = grid.addColumn(person -> person.getAddress().getPostalCode()).setHeader("Postal Code");
    HeaderRow topRow = grid.prependHeaderRow();
    HeaderCell informationCell = topRow.join(nameColumn, ageColumn);
    informationCell.setText("Basic Information");
    HeaderCell addressCell = topRow.join(streetColumn, postalCodeColumn);
    addressCell.setText("Address Information");
    grid.appendFooterRow().getCell(nameColumn).setText("Total: " + getItems().size() + " people");
    grid.setId("grid-with-header-and-footer-rows");
    addCard("Header and footer rows", "Adding header and footer rows", grid);
}

Example 15 with Grid

use of com.vaadin.flow.component.grid.Grid in project flow-components by vaadin.

the class GridViewSelectionPage method createMultiSelect.

private void createMultiSelect() {
    Div messageDiv = new Div();
    List<Person> people = getItems();
    Grid<Person> grid = new Grid<>();
    grid.setItems(people);
    grid.addColumn(Person::getFirstName).setHeader("Name");
    grid.addColumn(Person::getAge).setHeader("Age");
    grid.setSelectionMode(SelectionMode.MULTI);
    grid.asMultiSelect().addSelectionListener(event -> messageDiv.setText(String.format("Selection changed from %s to %s, selection is from client: %s", event.getOldValue(), event.getValue(), event.isFromClient())));
    // You can pre-select items
    grid.asMultiSelect().select(people.get(0), people.get(1));
    NativeButton selectBtn = new NativeButton("Select first five persons");
    selectBtn.addClickListener(event -> grid.asMultiSelect().select(people.subList(0, 5).toArray(new Person[5])));
    NativeButton deselectBtn = new NativeButton("Deselect all");
    deselectBtn.addClickListener(event -> grid.asMultiSelect().deselectAll());
    NativeButton selectAllBtn = new NativeButton("Select all");
    selectAllBtn.addClickListener(event -> ((GridMultiSelectionModel<Person>) grid.getSelectionModel()).selectAll());
    grid.setId("multi-selection");
    selectBtn.setId("multi-selection-button");
    messageDiv.setId("multi-selection-message");
    addCard("Selection", "Grid Multi Selection", grid, new HorizontalLayout(selectBtn, deselectBtn, selectAllBtn), messageDiv);
}