Examples with IronList com.vaadin.flow.component.ironlist.IronList used on opensource projects

Example 11 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createDataProviderWithStrings.

private void createDataProviderWithStrings() {
    IronList<String> list = new IronList<>();
    list.setHeight("100px");
    DataProvider<String, ?> dataProvider1 = DataProvider.ofItems("Item 1", "Item 2", "Item 3");
    DataProvider<String, ?> dataProvider2 = DataProvider.ofItems("Another item 1", "Another item 2");
    DataProvider<String, ?> dataProvider3 = DataProvider.ofItems();
    list.setDataProvider(dataProvider1);
    NativeButton setProviderWith3Items = new NativeButton("Change dataprovider 1", evt -> list.setDataProvider(dataProvider1));
    NativeButton setProviderWith2Items = new NativeButton("Change dataprovider 2", evt -> list.setDataProvider(dataProvider2));
    NativeButton setEmptyProvider = new NativeButton("Change dataprovider 3", evt -> list.setDataProvider(dataProvider3));
    list.setId("dataprovider-with-strings");
    setProviderWith3Items.setId("dataprovider-with-strings-3-items");
    setProviderWith2Items.setId("dataprovider-with-strings-2-items");
    setEmptyProvider.setId("dataprovider-with-strings-0-items");
    add(list, setProviderWith3Items, setProviderWith2Items, setEmptyProvider);
}

Example 12 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListView method createPeopleListWithDataProvider.

private void createPeopleListWithDataProvider() {
    // @formatter:off
    IronList<Person> list = new IronList<>();
    list.setHeight("400px");
    list.getStyle().set("border", "1px solid lightgray");
    DataProvider<Person, ?> dataProvider = DataProvider.ofCollection(createListOfPeople());
    list.setDataProvider(dataProvider);
    list.setGridLayout(true);
    list.setRenderer(TemplateRenderer.<Person>of("<div style='padding:10px; display:flex; min-width:250px'>" + "<div style='margin-right:10px; width:40px; height:40px'>" + "<img src='[[item.picture]]' style='border-radius:50%; width:40px; height:40px; background-color:lightgray'/>" + "</div>" + "<div>" + "[[item.firstName]] [[item.lastName]]" + "<br><small>[[item.email]]</small>" + "</div>" + "</div>").withProperty("firstName", Person::getFirstName).withProperty("lastName", Person::getLastName).withProperty("email", Person::getEmail).withProperty("picture", Person::getPicture));
    // For a smooth scrolling experience use a placeholder item
    Person placeholder = new Person();
    placeholder.setFirstName("-----");
    placeholder.setPicture("//:0");
    list.setPlaceholderItem(placeholder);
    // @formatter:on
    list.setId("list-of-people-with-dataprovider");
    addCard("Using templates", "List of people with DataProvider", new Label("List of people with grid layout"), list);
}

Example 13 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createLazyLoadingDataProvider.

private void createLazyLoadingDataProvider() {
    IronList<String> list = new IronList<>();
    list.setHeight("100px");
    Label message = new Label();
    DataProvider<String, ?> dataProvider = DataProvider.fromCallbacks(query -> {
        List<String> result = queryStrings(query);
        message.setText("Sent " + result.size() + " items");
        return result.stream();
    }, this::countStrings);
    list.setDataProvider(dataProvider);
    list.setId("lazy-loaded");
    message.setId("lazy-loaded-message");
    add(list, message);
}

Example 14 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createDetachableList.

private void createDetachableList() {
    Div container1 = new Div(new Label("Container 1"));
    container1.setId("detachable-list-container-1");
    Div container2 = new Div(new Label("Container 2"));
    container2.setId("detachable-list-container-2");
    IronList<Person> list = new IronList<>();
    list.setId("detachable-list");
    list.setItems(createPeople(20));
    list.setRenderer(Person::getName);
    container1.add(list);
    add(container1);
    NativeButton detach = new NativeButton("Detach list", e -> list.getParent().ifPresent(parent -> ((HasComponents) parent).remove(list)));
    detach.setId("detachable-list-detach");
    NativeButton attach1 = new NativeButton("Attach list to container 1", e -> container1.add(list));
    attach1.setId("detachable-list-attach-1");
    NativeButton attach2 = new NativeButton("Attach list to container 2", e -> container2.add(list));
    attach2.setId("detachable-list-attach-2");
    NativeButton invisible = new NativeButton("Set list invisble", e -> list.setVisible(false));
    invisible.setId("detachable-list-invisible");
    NativeButton visible = new NativeButton("Set list visible", e -> list.setVisible(true));
    visible.setId("detachable-list-visible");
    add(container1, container2, detach, attach1, attach2, invisible, visible);
}

Example 15 with IronList

use of com.vaadin.flow.component.ironlist.IronList in project flow-components by vaadin.

the class IronListTestPage method createTemplateFromRendererWithPeople.

private void createTemplateFromRendererWithPeople() {
    IronList<Person> list = new IronList<>();
    list.setHeight("100px");
    List<Person> people = createPeople(3);
    DataProvider<Person, ?> dataProvider = DataProvider.ofCollection(people);
    list.setDataProvider(dataProvider);
    list.setRenderer(TemplateRenderer.<Person>of("[[item.name]] - [[item.age]] - [[item.user]]").withProperty("name", Person::getName).withProperty("age", Person::getAge).withProperty("user", person -> person.getName().toLowerCase().replace(" ", "_")));
    NativeButton update = new NativeButton("Update item 1", evt -> {
        Person item = people.get(0);
        item.setName(item.getName() + " Updated");
        list.getDataProvider().refreshItem(item);
    });
    list.setId("template-renderer-with-people");
    update.setId("template-renderer-with-people-update-item");
    add(list, update);
}