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

Example 16 with Grid

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

the class GridViewSelectionPage method createSingleSelect.

private void createSingleSelect() {
    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.asSingleSelect().addValueChangeListener(event -> messageDiv.setText(String.format("Selection changed from %s to %s, selection is from client: %s", event.getOldValue(), event.getValue(), event.isFromClient())));
    NativeButton toggleSelect = new NativeButton("Toggle selection of the first person");
    Person firstPerson = people.get(0);
    toggleSelect.addClickListener(event -> {
        GridSelectionModel<Person> selectionModel = grid.getSelectionModel();
        if (selectionModel.isSelected(firstPerson)) {
            selectionModel.deselect(firstPerson);
        } else {
            selectionModel.select(firstPerson);
        }
    });
    grid.setId("single-selection");
    toggleSelect.setId("single-selection-toggle");
    messageDiv.setId("single-selection-message");
    addCard("Selection", "Grid Single Selection", grid, toggleSelect, messageDiv);
}

Example 17 with Grid

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

the class GridViewSortingPage method createSorting.

private void createSorting() {
    Div messageDiv = new Div();
    Grid<Person> grid = new Grid<>();
    grid.setItems(getItems());
    grid.setSelectionMode(SelectionMode.NONE);
    grid.addColumn(Person::getFirstName, "firstName").setHeader("Name");
    grid.addColumn(Person::getAge, "age").setHeader("Age");
    grid.addColumn(TemplateRenderer.<Person>of("<div>[[item.street]], number [[item.number]]<br><small>[[item.postalCode]]</small></div>").withProperty("street", person -> person.getAddress().getStreet()).withProperty("number", person -> person.getAddress().getNumber()).withProperty("postalCode", person -> person.getAddress().getPostalCode()), "street", "number").setHeader("Address");
    Checkbox multiSort = new Checkbox("Multiple column sorting enabled");
    multiSort.addValueChangeListener(event -> grid.setMultiSort(event.getValue()));
    grid.addSortListener(event -> {
        String currentSortOrder = grid.getDataCommunicator().getBackEndSorting().stream().map(querySortOrder -> String.format("{sort property: %s, direction: %s}", querySortOrder.getSorted(), querySortOrder.getDirection())).collect(Collectors.joining(", "));
        messageDiv.setText(String.format("Current sort order: %s. Sort originates from the client: %s.", currentSortOrder, event.isFromClient()));
    });
    // you can set the sort order from server-side with the grid.sort method
    NativeButton invertAllSortings = new NativeButton("Invert all sort directions", event -> {
        List<GridSortOrder<Person>> orderList = grid.getSortOrder();
        List<GridSortOrder<Person>> newOrderList = new ArrayList<>(orderList.size());
        for (GridSortOrder<Person> sort : orderList) {
            newOrderList.add(new GridSortOrder<>(sort.getSorted(), sort.getDirection().getOpposite()));
        }
        grid.sort(newOrderList);
    });
    NativeButton resetAllSortings = new NativeButton("Reset all sortings", event -> grid.sort(null));
    grid.setId("grid-sortable-columns");
    multiSort.setId("grid-multi-sort-toggle");
    invertAllSortings.setId("grid-sortable-columns-invert-sortings");
    resetAllSortings.setId("grid-sortable-columns-reset-sortings");
    messageDiv.setId("grid-sortable-columns-message");
    addCard("Sorting", "Grid with sortable columns", grid, multiSort, invertAllSortings, resetAllSortings, messageDiv);
}

Example 18 with Grid

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

the class GridViewUsingComponentsPage method createColumnComponentRenderer.

private void createColumnComponentRenderer() {
    Grid<Person> grid = new Grid<>();
    grid.setItems(createItems());
    // Use the component constructor that accepts an item ->
    // new PersonComponent(Person person)
    grid.addComponentColumn(PersonComponent::new).setHeader("Person");
    // Or you can use an ordinary function to setup the component
    grid.addComponentColumn(item -> new NativeButton("Remove", evt -> {
        ListDataProvider<Person> dataProvider = (ListDataProvider<Person>) grid.getDataProvider();
        dataProvider.getItems().remove(item);
        dataProvider.refreshAll();
    })).setHeader("Actions");
    // Item details can also use components
    grid.setItemDetailsRenderer(new ComponentRenderer<>(PersonCard::new));
    // When items are updated, new components are generated
    TextField idField = new TextField("", "Person id");
    TextField nameField = new TextField("", "New name");
    NativeButton updateButton = new NativeButton("Update person", event -> {
        String id = idField.getValue();
        String name = nameField.getValue();
        ListDataProvider<Person> dataProvider = (ListDataProvider<Person>) grid.getDataProvider();
        dataProvider.getItems().stream().filter(person -> String.valueOf(person.getId()).equals(id)).findFirst().ifPresent(person -> {
            person.setFirstName(name);
            dataProvider.refreshItem(person);
        });
    });
    grid.setSelectionMode(SelectionMode.NONE);
    grid.setId("component-renderer");
    idField.setId("component-renderer-id-field");
    nameField.setId("component-renderer-name-field");
    updateButton.setId("component-renderer-update-button");
    addCard("Using components", "Grid with columns using component renderer", grid, idField, nameField, updateButton);
}

Example 19 with Grid

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

the class GridWithTemplatePage method createGridInATemplateWithTemplatesInTheCells.

private void createGridInATemplateWithTemplatesInTheCells() {
    GridInATemplate gridInATemplate = new GridInATemplate();
    gridInATemplate.setId("injected-template-in-cells");
    Grid<String> grid = gridInATemplate.getGrid();
    setCommonGridFeatures(grid, gridInATemplate.getId().get());
    grid.addColumn(value -> value);
    grid.addColumn(new ComponentRenderer<>(value -> getTestTemplate(value, grid.getId().get())));
    add(new H3("Grid with templates in the cells"), gridInATemplate);
}

Example 20 with Grid

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

the class GridWithTemplatePage method createGridInTemplateWithColumnProperties.

private void createGridInTemplateWithColumnProperties() {
    GridInATemplate gridInATemplate = new GridInATemplate();
    gridInATemplate.setId("injected-columns-with-properties");
    Grid<String> grid = gridInATemplate.getGrid();
    setCommonGridFeatures(grid, gridInATemplate.getId().get());
    grid.addColumn(value -> value).setFlexGrow(2);
    grid.addColumn(TemplateRenderer.of("[[index]]")).setFlexGrow(0).setWidth("20px");
    grid.addColumn(new ComponentRenderer<>(value -> getTestTemplate(value, grid.getId().get()))).setFrozen(true).setResizable(true);
    add(new H3("Grid with column properties"), gridInATemplate);
}