CODEWITHSUNDEEP
vaadinvaadin23
alexanoid
alexanoid

Reputation: 25862

Vaadin23 access to search term entered to ComboBox from custom Renderer

I implemented the custom Renderer for ComboBox items:

private Renderer<CompositeEntityResult> createRenderer() {

        StringBuilder tpl = new StringBuilder();

        tpl.append("<div style=\"display: flex;\">");
        tpl.append("  <div>");
        tpl.append("    <span ${item.name}</span>
...

comboBox.setRenderer(createRenderer());

Is it possible somehow to access the entered search term to ComboBox inside the renderer HTML markup? Also, what template engine is used for this markup?

UPDATED

private Renderer<CompositeEntityResult> createRenderer() {

        StringBuilder tpl = new StringBuilder();

        tpl.append("<div style=\"display: flex;\">");
        tpl.append("  <div>");
        tpl.append("    <span ${item.name}</span>
...

 return LitRenderer.<CompositeEntityResult>of(tpl.toString())
                .withProperty("name", e -> "< b>" + e.getName() + < /b>))

Right now it appears like a plain text in the ComboBox window, like <b>somename</b> but I'd like that 'somename' to be in bold instead.

Upvotes: 0

Views: 60

Answers (1)

Simon Martinelli
Simon Martinelli

Reputation: 36223

You have to use JavaScript to get the value before the user leaves the input field:

comboBox.getElement()
   .executeJs("return this.querySelector('input').value")
   .then(String.class, value -> { // use the value });

Answer to your second question:

private Renderer<CompositeEntityResult> createRenderer() {

    StringBuilder tpl = new StringBuilder();

    tpl.append("<div style=\"display: flex;\">");
    tpl.append("  <div>");
    tpl.append("    <span><b>${item.name}</b></span>
...

return LitRenderer.<CompositeEntityResult>of(tpl.toString())
            .withProperty("name", e -> e.getName() ))

Upvotes: 1

Related Questions