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

Example 51 with Grid

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

the class GridViewConfiguringColumnsPage method createBeanGrid.

private void createBeanGrid() {
    // Providing a bean-type generates columns for all of it's properties
    Grid<Person> grid = new Grid<>(Person.class);
    grid.setItems(getItems());
    // Property-names are automatically set as keys
    // You can remove undesired columns by using the key
    grid.removeColumnByKey("id");
    // Columns for sub-properties can be added easily
    grid.addColumn("address.postalCode");
    // You can also configure the included properties and their order with
    // a single method call
    NativeButton showBasicInformation = new NativeButton("Show basic information", event -> grid.setColumns("firstName", "age", "address"));
    NativeButton showAddressInformation = new NativeButton("Show address information", event -> grid.setColumns("address.street", "address.number", "address.postalCode"));
    grid.setId("bean-grid");
    showBasicInformation.setId("show-basic-information");
    showAddressInformation.setId("show-address-information");
    addCard("Configuring Columns", "Automatically adding columns", grid, showBasicInformation, showAddressInformation);
}

Example 52 with Grid

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

the class GridViewContextMenuPage method createContextSubMenu.

private void createContextSubMenu() {
    Grid<Person> grid = new Grid<>();
    ListDataProvider<Person> dataProvider = DataProvider.ofCollection(getItems());
    grid.setDataProvider(dataProvider);
    grid.addColumn(Person::getFirstName).setHeader("Name");
    grid.addColumn(Person::getAge).setHeader("Age");
    GridContextMenu<Person> contextMenu = new GridContextMenu<>(grid);
    GridMenuItem<Person> insert = contextMenu.addItem("Insert");
    insert.getSubMenu().addItem("Insert a row above", event -> {
        Optional<Person> item = event.getItem();
        if (!item.isPresent()) {
            // no selected row
            return;
        }
        List<Person> items = (List) dataProvider.getItems();
        items.add(items.indexOf(item.get()), new PeopleGenerator().createPerson(items.size() + 1));
        dataProvider.refreshAll();
    });
    insert.getSubMenu().add(new Hr());
    insert.getSubMenu().addItem("Insert a row below", event -> {
        Optional<Person> item = event.getItem();
        if (!item.isPresent()) {
            // no selected row
            return;
        }
        List<Person> items = (List) dataProvider.getItems();
        items.add(items.indexOf(item.get()) + 1, new PeopleGenerator().createPerson(items.size() + 1));
        dataProvider.refreshAll();
    });
    grid.setId("context-submenu-grid");
    addCard("Context Menu", "Using Context Sub Menu With Grid", grid, contextMenu);
}

Example 53 with Grid

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

the class GridViewEditorPage method createBufferedDynamicEditor.

private void createBufferedDynamicEditor() {
    Div message = new Div();
    message.setId("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);
    editor.setBuffered(true);
    TextField field = new TextField();
    binder.bind(field, "firstName");
    nameColumn.setEditorComponent(field);
    Div validationStatus = new Div();
    validationStatus.getStyle().set("color", "red");
    validationStatus.setId("email-validation");
    Checkbox checkbox = new Checkbox();
    binder.bind(checkbox, "subscriber");
    subscriberColumn.setEditorComponent(checkbox);
    TextField emailField = new TextField();
    // When not a subscriber, we want to show a read-only text-field that
    // ignores whatever is set to it
    TextField readOnlyEmail = new TextField();
    readOnlyEmail.setValue("Not a subscriber");
    readOnlyEmail.setReadOnly(true);
    Runnable bindEmail = () -> binder.forField(emailField).withValidator(new EmailValidator("Invalid email")).withStatusLabel(validationStatus).bind("email");
    Runnable setEmail = () -> emailColumn.setEditorComponent(item -> {
        if (item.isSubscriber()) {
            bindEmail.run();
            return emailField;
        } else {
            return readOnlyEmail;
        }
    });
    // Sets the binding based on the Person bean state
    setEmail.run();
    // Refresh subscriber editor component when checkbox value is changed
    checkbox.addValueChangeListener(event -> {
        // Only updates from the client-side should be taken into account
        if (event.isFromClient()) {
            // When using buffered mode, the partial updates shouldn't be
            // propagated to the bean before the Save button is clicked, so
            // here we need to override the binding function to take the
            // checkbox state into consideration instead
            emailColumn.setEditorComponent(item -> {
                if (checkbox.getValue()) {
                    bindEmail.run();
                    return emailField;
                } else {
                    return readOnlyEmail;
                }
            });
            grid.getEditor().refresh();
        }
    });
    Collection<Button> editButtons = Collections.newSetFromMap(new WeakHashMap<>());
    // Resets the binding function to use the bean state whenever the editor
    // is closed
    editor.addCloseListener(event -> {
        setEmail.run();
        editButtons.stream().forEach(button -> button.setEnabled(true));
    });
    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() + ", " + event.getItem().getEmail()));
    grid.setId("buffered-dynamic-editor");
    addCard("Grid Editor", "Dynamic Editor in Buffered Mode", message, validationStatus, grid);
}

Example 54 with Grid

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

the class GridViewHeaderAndFooterRowsPage method createHeaderAndFooterUsingComponents.

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

Example 55 with Grid

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

the class GridBenchmark method setParameter.

@Override
public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
    Location location = event.getLocation();
    QueryParameters queryParameters = location.getQueryParameters();
    Map<String, List<String>> parametersMap = queryParameters.getParameters();
    if (!parametersMap.containsKey("variant") || !parametersMap.containsKey("metric")) {
        add(new Text("Provide query parameters: variant and metric"));
        return;
    }
    String metric = parametersMap.get("metric").get(0);
    String variant = parametersMap.get("variant").get(0);
    LoggerFactory.getLogger(GridBenchmark.class).info("Sample: " + variant + "-" + metric);
    switch(variant) {
        case "simple":
            grid = getGrid();
            addColumns(grid, 5, false);
            break;
        case "multicolumn":
            grid = getGrid();
            addColumns(grid, 50, false);
            break;
        case "componentrenderers":
            grid = getGrid();
            addColumns(grid, 5, true);
            break;
        case "detailsopened":
            grid = getGrid();
            addColumns(grid, 5, false);
            grid.setItemDetailsRenderer(new ComponentRenderer<>(item -> new Text(item.toString())));
            items.forEach(item -> grid.setDetailsVisible(item, true));
            break;
        case "tree":
            grid = getTreeGrid();
            ((TreeGrid<String>) grid).addHierarchyColumn(i -> i);
            addColumns(grid, 5, false);
            break;
        case "mixed":
            grid = getTreeGrid();
            ((TreeGrid<String>) grid).addHierarchyColumn(i -> i);
            addColumns(grid, 50, true);
            grid.setItemDetailsRenderer(new ComponentRenderer<>(item -> new Text(item.toString())));
            treeData.getRootItems().forEach(item -> grid.setDetailsVisible(item, true));
            break;
        default:
            break;
    }
    switch(metric) {
        case "verticalscrollframetime":
            add(grid);
            whenRendered(grid).then(v -> grid.getElement().executeJs("window.measureScrollFrameTime(this, false)"));
            break;
        case "horizontalscrollframetime":
            add(grid);
            whenRendered(grid).then(v -> grid.getElement().executeJs("window.measureScrollFrameTime(this, true)"));
            break;
        case "rendertime":
            measureRendered(grid);
            UI.getCurrent().getElement().executeJs("return window.startWhenReady()").then(v -> add(grid));
            break;
        case "expandtime":
            add(grid);
            startWhenRendered(grid).then(v -> {
                measureRendered(grid);
                TreeGrid<String> treeGrid = (TreeGrid<String>) grid;
                TreeData<String> data = ((TreeDataProvider<String>) treeGrid.getDataProvider()).getTreeData();
                treeGrid.expandRecursively(data.getRootItems(), 5);
            });
            break;
        default:
            break;
    }
}