3

I am not able to do the basic setup for the ag-grid in stencil web component framework.

I am new in both ag-grid and stencil and ag-grid’s documentation is the worst and they say it is the best. All pun intended.

package.json


    "dependencies": {
        "ag-grid": "^18.1.2",
        "ag-grid-community": "^21.1.0"
      }

index.html


    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
      <title>Stencil Component Starter</title>

      <script type="module" src="/build/stencil-starter-project-name.esm.js"></script>
      <script nomodule src="/build/stencil-starter-project-name.js"></script>

    </head>
    <body>

      <my-component></my-component>

    </body>
    </html>

MyComponent Class


    import { Component, h, Element } from '@stencil/core';
    import AgGrid from 'ag-grid';

    @Component({
      tag: 'my-component',
      styleUrl: 'my-component.scss',
      shadow: true
    })
    export class MyComponent {

      @Element() el: HTMLElement;

      agGrid: HTMLElement;

      columnDefs: [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
      ]

      rowData: [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
      ]

      gridOptions = {
        columnDefs: this.columnDefs,
        rowData: this.rowData,
        onGridReady: function () {
            this.gridOptions.api.sizeColumnsToFit();
        }
      };

      render() {
        return (
          <div
            id="myGrid"
            style={{height: '200px', width: '200px'}}
            class='ag-theme-balham"'
          >

          </div>
        );
      }

      componentDidLoad() {
        this.agGrid = this.el.shadowRoot.querySelector('#myGrid');
        new AgGrid.Grid(this.agGrid, this.gridOptions);
      }
    }

This is the new code for the mycomponent class. I thought I had cracked it after sucessfully implementing HighCharts but still too far from the answer. After running the above code I get two errors namely :-

chunk-2feedbe7.js:58 TypeError: Cannot read property 'GridOptionsWrapper' of undefined

and

Uncaught (in promise) Error: Constructor for "my-component#undefined" was not found

Any help is highly appriciated! Thank you!

Harshit Pareek
  • 167
  • 2
  • 9
  • Why use `componentDidRender()`? `componentDidLoad()` is probably more appropriate. – G. Tranter Jul 23 '19 at 13:58
  • I already tried that it throws an error that setColumnDefs function is not be called on undefined. I would really appreciate if you have any plunker or example that I can use. I have been trying this since three days but no luck. thank you! – Harshit Pareek Jul 24 '19 at 04:33

0 Answers0