PolymerTemplate to TemplateRenderer

Flow
1

HI everybody,

I am working on Vaadin Designer and create a organization-card with children:

<div class="content" style="width: 100%;">
 <vaadin-horizontal-layout theme="spacing" id="header-row">
  <label id="header-label">[[header]
]</label>
  <vaadin-button theme="icon primary small" on-click="handleClick">
   <iron-icon icon="lumo:edit"></iron-icon>
  </vaadin-button>
  ...

In Java, I passed this component to Grid by convert it to TemplateRenderer (based on Vaadin Bakery demo’s idea for better performance…)

  public static TemplateRenderer<Organization> getTemplate(){
        return TemplateRenderer.of("<organization-card " +
                "header=[[item.name]
] " +
                "child-organization-count=[[item.totalChildDepartment]
] " +
                "total-user=[[item.totalUser]
] " +
                **"handleClick='onEditClick'** " +
                "</organization-card>");
    }

And pass it to addColumn of Grid:

        grid.addColumn(OrganizationCard.getTemplate()
                .withProperty("name", Organization::getName)
                .withProperty("totalChildDepartment", Organization::getTotalChildDepartment)
                .withProperty("totalUser", Organization::getTotalUser)
                .withEventHandler("onEditClick", organization -> {
                    System.out.println("Hello");
                })
        );

But the problem is I can’t even pass #withEventHandler to my vaadin-button. If I change handleClick to on-click, It should work but that event handler will work on a whole but not vaadin-button.

FYI, header, child-organization-count, total-user are working good, they show up in UI. Except the event handler.

How can I pass my event to vaadin-button or child of organization-card ?

Thank you.!

2

have you tried it with on-click='onEditClick' in the template definition?

The keywords used are important, as they must conform to standard JS events → on-click, on-change, on-blur , etc… handleClick is not one of them.

3

Kaspar Scherrer:
have you tried it with on-click='onEditClick' in the template definition?

The keywords used are important, as they must conform to standard JS events → on-click, on-change, on-blur , etc… handleClick is not one of them.

Yes, I already tried on-click and it works. But that event is apply to organization-card, not for vaadin button which is a child of organization-card