Как открыть новую Vaadin Grid при нажатии («детали») на строке сетки? - PullRequest
Новая
       31

Как открыть новую Vaadin Grid при нажатии («детали») на строке сетки?

0 голосов
/ 21 апреля 2019

Я пытаюсь отобразить данные в формате «сетки» (из списка), когда «родительская сетка» щелкает «подробности» / строку.

По примеру на сайте vaadin (* 1004)* и в основном пытается отобразить данные в формате «сетки» внутри «», который открывается при нажатии на «детали», с источником в виде «другого» списка.

Другими словами, есть два списка1. Человек 2. Автомобили (принадлежащие человеку - отношения один-ко-многим)

Первая родительская сетка относится к человеку. Теперь, нажав на строку / детали, вы хотите показать все «машины», принадлежащиеодин человек внутри '', предпочтительно в формате сетки.

Я искал различные возможности использования TemplateRenderer, но не смог выяснить итерацию в DIV. Ниже приведен пример кода, там есть примечания для указаниягде я пытаюсь добавить вторую сетку (внутри DIV, которая открывается при нажатии на детали)

ПРИМЕЧАНИЕ. Любое другое предложение (вместо перехода к деталям / пути щелчка по строке) для лучшего взаимодействия с пользователемe для просмотра "детали" приветствуются 

public class MainView extends VerticalLayout {

  Grid<User> grid1;

  Grid<Car> grid2;
     public MainView() {

    List<User> users = BatchUtils.getUsers();

    List<Car> cars = BatchUtils.getCars();

    grid1 = new Grid<>(User.class);

    //---to be opened in details section
    grid2= new Grid<>(Car.class);
    grid2.setItems(cars);


    ListDataProvider<User> dataProvider = new ListDataProvider<>(users);
    grid1.setDataProvider(dataProvider);

    grid1.setSelectionMode(Grid.SelectionMode.NONE);

    // You can use any renderer for the item details. By default, the
    // details are opened and closed by clicking the rows.
    grid1.setItemDetailsRenderer(TemplateRenderer.<User>of(
        "<div class='custom-details' style='border: 1px solid gray; padding: 10px; width: 100%; box-sizing: border-box;'>"
            + "<div>Hi! My name is <b>[[item.name]]!</b></div>" + "</div>")
                                                .withProperty("Name", User::getName)
                                                // This is now how we open the details
                                                .withEventHandler("handleClick", user -> {
                                                  grid1.getDataProvider()
                                                      .refreshItem(user);
                                                }));

    //****** trying somehow add grid2 from list of CARS *******************

    // Disable the default way of opening item details:
    grid1.setDetailsVisibleOnClick(false);

    grid1.addColumn(new NativeButtonRenderer<>("Details",
        item -> grid1.setDetailsVisible(item, !grid1.isDetailsVisible(item))));
    add(grid1);   } }
...