Button event does not work

Flow
1

Hi,

I use v-grid component with Polymer. I try add custom buttons in one of columns. The buttons render correctly, but they don’t capture on-click event. I didn’t something wrong or it is a bug?

{{index}} [u] [b] [/b] [/u] {{item.name}} {{item.text}} {{item.name}} {{item.text}}
2

Thanks for the report, and sorry for the late reply!

Sounds like a bug, but we need to investigate. I created an issue in GitHub which you can follow:
https://github.com/vaadin/components/issues/51

The problem is most likely the fact that the on-click handler is lost when we copy the light DOM HTML content into the actual final render tree. The grid is not really a Polymer element in the sense that was built before Polymer using GWT, and we just have a wrapper around it using Polymer, so some of the things you expect to work with Polymer could work unexpectedly.

3

I added a workaround in the issue description if you’re interested.

4

Thank you so much. I am wondering what do you recommand to identify which row I clicked on by using a custom button? For example, in this cas, I which to remove the item when the button is clicked.

5

Oh, right, sorry. I was supposed to add that info to the workaround as well :slight_smile:

Basically, you can use cell.row.index to access the row index (added to the workaround). There’s a known issue about using that variable, as it is a proxy object, so the value always reflects the last index in the visible viewport. You need to store the value in another variable to access the correct value later: https://github.com/vaadin/components/issues/21

6

Fanstastic. Thank you!

Mark

7

The code is no longer works.

        var _this = this;
        var grid = this.$.the_grid;

        grid.columns[1]

.renderer = function(cell) {

          console.log("hello world");
        };

It said it cannot find renderer().

It try printing out grid.columns. It shows something like this, [$h:10]

I asssumed the I have 10 columns, but as soon as I print "grid.columns.[0]
", it says undefined.

Thank you.

8

The bug above is fixed after I updated to beta 6. Thank you.

However, the renderer function still does not work. I render nothing in the cell. It seems that cell.element.appendChild(button) does not work. Whatever I append to, it turn out blank.

9

It is working now. I forget that I have to call Polymer function.

thank you!

10

Hello Good day! I added vaadin-button in a vaadin dialog but when I tried to click the button which serve as the close button it didn’t work.

[HTML]

@property
show_form= false;
	
	<vaadin-button class=“sampleClass” @click=${this.updateShowForm}> Show Form </vaadin-button>
	
	<dom-module id="error-dialog-overlay-styles" theme-for="vaadin-dialog-overlay">
            <template>
              <style>
                :host([theme~="payment-dialog"]
) [part="overlay"]
{
                  border-radius: 1rem;
                  width: 30%;
                }
              </style>
            </template>
          </dom-module>

	<vaadin-dialog theme="payment-dialog" ?opened=${this.show_form} @opened-changed=${this.formOpenedChanged}>
            <template>
              <vaadin-horizontal-layout class="full-height align-h-center">
                <div class="row”>
                  <vaadin-button id=“btn” class="full-width primary-btn" style="margin-top: 20px; height: 2.5rem;" @click=${this.closeDialog}>
                    <span>CONTINUE</span>
                  </vaadin-button>
                </div>
              </vaadin-horizontal-layout>
            </template>
          </vaadin-dialog>

[TypeScript]


 updateShowForm() {
    this.show_form = true;
  }

  formOpenedChanged(e: { target: DialogElement }) {   
    this.show_addAccount = e.target.opened;
    console.log("gg", this.show_addAccount);
  }

  closeDialog() {
    console.log("gg");
  }

Thank you.