CODEWITHSUNDEEP
javascriptvaadinvaadin-gridlit-elementlit-html
veloRace
veloRace

Reputation: 1

How can i make my vaadin renderers return my render functions as expected?

I'm using lit-element and vaadin grid and i'm trying to use the renderer functions in order to return data into the appropriate vaadin column. However, when trying to return the render() method its rendering the data into vaadin grid column as [object object]. 

firstUpdated() {
    super.firstUpdated();

    fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
      .then(r => r.json())
      .then(data => {
        this.users = data.result;
      });
  }

  render() {
    return html`
      <style>
        .address {
          white-space: normal;
        }

        vaadin-grid-filter {
          display: flex;
        }

        vaadin-text-field {
          max-width: 100%;
        }
      </style>

      <vaadin-grid .items="${this.users}" .rowDetailsRenderer="${this.rowDetailsRenderer}" column-reordering-allowed multi-sort>
        <vaadin-grid-column width="50px" flex-grow="0" header="#" .renderer="${this.indexRenderer}" resizable></vaadin-grid-column>
        <vaadin-grid-filter-column path="firstName" header="First name"></vaadin-grid-filter-column>
        <vaadin-grid-sort-column path="lastName" header="Last name"></vaadin-grid-sort-column>
        <vaadin-grid-column width="150px" header="Repitch" .renderer="${this.buttonRenderer}"></vaadin-grid-column>
        <vaadin-grid-column width="150px" path="email" .headerRenderer="${this.emailHeaderRenderer}"></vaadin-grid-column>

      </vaadin-grid>
    `;
  }

  buttonRenderer(root, column, rowData) {
    render(
      html`
        <button>Test</button>
      `, 
      root
    );
  }

  indexRenderer(root, column, rowData) {
    render(
      html`
        <div>${rowData.index}</div>
      `, 
      root
    );
  }

I expect to render the ${rowData.index} into the first vaadin grid column but the value shown in the UI is [object object. I'm able to show the data received from the fetch as i can show it into the columns that are not using the renderer functions (firstname and lastname). Any help will be greatly appreciated!

Upvotes: 0

Views: 528

Answers (1)

Peter Burns
Peter Burns

Reputation: 45371

Quoting Thad's comment:

I don't understand why you're having a problem. Your example works: http://stackblitz.com/edit/grid-renderers?file=index.ts – all I've done is added the users property.

Upvotes: 0

Related Questions