Examples with TextField com.vaadin.flow.component.textfield.TextField used on opensource projects

Example 41 with TextField

use of com.vaadin.flow.component.textfield.TextField 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 42 with TextField

use of com.vaadin.flow.component.textfield.TextField 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 43 with TextField

use of com.vaadin.flow.component.textfield.TextField 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 44 with TextField

use of com.vaadin.flow.component.textfield.TextField in project flow-components by vaadin.

the class ItemClickListenerPage method createGridWithChangingKeysOfItemsAndFocusableHeader.

private void createGridWithChangingKeysOfItemsAndFocusableHeader() {
    Span message = new Span();
    message.setId("item-click-event-log");
    ListDataProvider<String> dataProvider = new ListDataProvider<>(Arrays.asList("a", "b", "c"));
    Grid<String> grid = new Grid<>();
    grid.setItems(dataProvider);
    grid.addColumn(x -> x).setHeader("Header");
    grid.addItemClickListener(ev -> message.setText("ItemClicked"));
    grid.setId(GRID_FILTER_FOCUSABLE_HEADER);
    Button filterButton = new Button("Filter");
    filterButton.setId("filterButton");
    Button clearFilterButton = new Button("Clear filter");
    clearFilterButton.setId("clearFilterButton");
    filterButton.addClickListener(event -> filterGrid(dataProvider, "b"));
    clearFilterButton.addClickListener(event -> filterGrid(dataProvider, null));
    TextField focusableHeader = new TextField();
    focusableHeader.setId("focusableHeader");
    grid.prependHeaderRow().getCells().get(0).setComponent(focusableHeader);
    add(grid, filterButton, clearFilterButton, message);
}

Example 45 with TextField

use of com.vaadin.flow.component.textfield.TextField in project flow-components by vaadin.

the class TreeComponentColumnsPage method addTreeGrid.

private void addTreeGrid(boolean addGridBefore) {
    TreeGrid<String> grid = new TreeGrid<>();
    if (addGridBefore) {
        grid.setId("grid-then-comp");
        add(grid);
    }
    ComponentRenderer<TextField, String> componentRenderer = new ComponentRenderer<>(TextField::new, (component, item) -> {
        component.setReadOnly(true);
        component.setValue(item);
    });
    grid.addComponentHierarchyColumn(this::createTextField).setHeader("Header A").setId("textfield");
    grid.addColumn(componentRenderer).setHeader("Header B");
    ComponentRenderer<Button, String> componentRendererBtn = new ComponentRenderer<>(() -> new Button("btn"), ((button, s) -> {
        button.setText(s);
        button.setThemeName(ButtonVariant.LUMO_ERROR.getVariantName());
    }));
    grid.addColumn(componentRendererBtn).setHeader("Header C");
    TreeData<String> data = new TreeData<>();
    final Map<String, String> parentPathMap = new HashMap<>();
    addRootItems("Granddad", 3, data, parentPathMap).forEach(granddad -> addItems("Dad", 3, granddad, data, parentPathMap).forEach(dad -> addItems("Son", 100, dad, data, parentPathMap)));
    grid.setDataProvider(new TreeDataProvider<>(data));
    if (!addGridBefore) {
        grid.setId("comp-then-grid");
        add(grid);
    }
}