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

Example 6 with Grid

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

the class GridViewBasicPage method createCallBackDataProvider.

private void createCallBackDataProvider() {
    Grid<Person> grid = new Grid<>();
    /*
         * This Data Provider doesn't load all items into the memory right away.
         * Grid will request only the data that should be shown in its current
         * view "window". The Data Provider will use callbacks to load only a
         * portion of the data.
         */
    PeopleGenerator generator = new PeopleGenerator();
    grid.setItems(DataProvider.fromCallbacks(query -> IntStream.range(query.getOffset(), query.getOffset() + query.getLimit()).mapToObj(index -> generator.createPerson(index + 1)), query -> 100 * 1000 * 1000));
    grid.addColumn(Person::getFirstName).setHeader("Name");
    grid.addColumn(Person::getAge).setHeader("Age");
    grid.setId("lazy-loading");
    addCard("Grid with lazy loading", grid);
}

Example 7 with Grid

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

the class GridViewBasicPage method createDisabledGrid.

private void createDisabledGrid() {
    Grid<Person> grid = new Grid<>();
    List<Person> people = createItems(500);
    grid.setItems(people);
    grid.addColumn(Person::getFirstName).setHeader("Name");
    grid.addColumn(Person::getAge).setHeader("Age");
    grid.addColumn(new NativeButtonRenderer<>("Button")).setHeader("Action");
    grid.setSelectionMode(SelectionMode.SINGLE);
    // The selection and action button won't work, but the scrolling will
    grid.setEnabled(false);
    NativeButton toggleEnable = new NativeButton("Toggle enable", evt -> grid.setEnabled(!grid.isEnabled()));
    toggleEnable.setId("disabled-grid-toggle-enable");
    Div div = new Div(toggleEnable);
    grid.setId("disabled-grid");
    addCard("Disabled grid", grid, div);
}

Example 8 with Grid

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

the class GridViewClickListenersPage method createClickListener.

private void createClickListener() {
    Div message = new Div();
    message.setId("clicked-item");
    Grid<Person> grid = new Grid<>();
    grid.setItems(getItems());
    grid.addColumn(Person::getFirstName).setHeader("Name");
    grid.addColumn(Person::getAge).setHeader("Age");
    // Disable selection: will receive only click events instead
    grid.setSelectionMode(SelectionMode.NONE);
    grid.addItemClickListener(event -> message.setText("Clicked Item: " + event.getItem().getFirstName()));
    grid.setId("item-click-listener");
    message.addClickListener(event -> message.setText(""));
    addCard("Click Listeners", "Item Click Listener", message, grid);
}

Example 9 with Grid

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

the class GridViewConfiguringColumnsPage method createColumnApiExample.

private void createColumnApiExample() {
    Grid<Person> grid = new Grid<>();
    GridSelectionModel<Person> selectionMode = grid.setSelectionMode(SelectionMode.MULTI);
    grid.setItems(getItems());
    Column<Person> idColumn = grid.addColumn(Person::getId).setHeader("ID").setFlexGrow(0).setWidth("75px");
    grid.addColumn(Person::getFirstName).setHeader("Name").setResizable(true);
    // Setting a column-key allows fetching the column later
    grid.addColumn(Person::getAge).setHeader("Age").setKey("age");
    grid.getColumnByKey("age").setResizable(true);
    NativeButton idColumnVisibility = new NativeButton("Toggle visibility of the ID column");
    idColumnVisibility.addClickListener(event -> idColumn.setVisible(!idColumn.isVisible()));
    NativeButton userReordering = new NativeButton("Toggle user reordering of columns");
    userReordering.addClickListener(event -> grid.setColumnReorderingAllowed(!grid.isColumnReorderingAllowed()));
    NativeButton freezeIdColumn = new NativeButton("Toggle frozen state of ID column");
    freezeIdColumn.addClickListener(event -> idColumn.setFrozen(!idColumn.isFrozen()));
    NativeButton freezeSelectionColumn = new NativeButton("Toggle frozen state of selection column");
    GridMultiSelectionModel<?> multiSlection = (GridMultiSelectionModel<?>) selectionMode;
    freezeSelectionColumn.addClickListener(event -> multiSlection.setSelectionColumnFrozen(!multiSlection.isSelectionColumnFrozen()));
    RadioButtonGroup<ColumnTextAlign> alignments = new RadioButtonGroup<>();
    alignments.setItems(ColumnTextAlign.values());
    alignments.setLabel("Text alignment for the Age column");
    alignments.setValue(ColumnTextAlign.START);
    alignments.addValueChangeListener(event -> grid.getColumnByKey("age").setTextAlign(event.getValue()));
    grid.setId("column-api-example");
    idColumnVisibility.setId("toggle-id-column-visibility");
    userReordering.setId("toggle-user-reordering");
    freezeIdColumn.setId("toggle-id-column-frozen");
    freezeSelectionColumn.setId("toggle-selection-column-frozen");
    alignments.setId("toggle-text-align");
    addCard("Configuring columns", "Column API example", grid, new VerticalLayout(idColumnVisibility, userReordering, freezeIdColumn, freezeSelectionColumn, alignments));
}

Example 10 with Grid

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

the class GridViewEditorPage method createBufferedEditor.

private void createBufferedEditor() {
    Div message = new Div();
    message.setId("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);
    Editor<Person> editor = grid.getEditor();
    editor.setBinder(binder);
    editor.setBuffered(true);
    Div validationStatus = new Div();
    validationStatus.setId("validation");
    TextField field = new TextField();
    binder.forField(field).withValidator(name -> name.startsWith("Person"), "Name should start with Person").withStatusLabel(validationStatus).bind("firstName");
    nameColumn.setEditorComponent(field);
    Checkbox checkbox = new Checkbox();
    binder.bind(checkbox, "subscriber");
    subscriberColumn.setEditorComponent(checkbox);
    Collection<Button> editButtons = Collections.newSetFromMap(new WeakHashMap<>());
    Column<Person> editorColumn = grid.addComponentColumn(person -> {
        Button edit = new Button("Edit");
        edit.addClassName("edit");
        edit.addClickListener(e -> {
            editor.editItem(person);
            field.focus();
        });
        edit.setEnabled(!editor.isOpen());
        editButtons.add(edit);
        return edit;
    });
    editor.addOpenListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
    editor.addCloseListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
    Button save = new Button("Save", e -> editor.save());
    save.addClassName("save");
    Button cancel = new Button("Cancel", e -> editor.cancel());
    cancel.addClassName("cancel");
    // Add a keypress listener that listens for an escape key up event.
    // Note! some browsers return key as Escape and some as Esc
    grid.getElement().addEventListener("keyup", event -> editor.cancel()).setFilter("event.key === 'Escape' || event.key === 'Esc'");
    Div buttons = new Div(save, cancel);
    editorColumn.setEditorComponent(buttons);
    editor.addSaveListener(event -> message.setText(event.getItem().getFirstName() + ", " + event.getItem().isSubscriber()));
    grid.setId("buffered-editor");
    addCard("Grid Editor", "Editor in Buffered Mode", message, validationStatus, grid);
}