Question 230066 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is is possible to use ag-grid-community with LitElements?

Is is possible to use ag-grid-community with LitElements?
This is what I have tried, I am unable to initialize the ag-grid instance with the below code,

Console Error – ag-grid-community.auto.esm.js:45056 Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.

import { Grid } from 'ag-grid-community';

export class myComponent extends LitElement {
  static scopedElements = {
    'ag-grid': Grid
  };

  constructor() {
    super();
    this.columnDefs = [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];
        
    this.rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];
        
    this.gridOptions = {
      columnDefs: this.columnDefs,
      rowData: this.rowData,
    };

    const eGridDiv = document.querySelector('#myGrid');
    new Grid(eGridDiv, this.gridOptions);
  }
  render() {
    return html`
      <div>
          <ag-grid
            .gridOptions=${this.gridOptions}
          ></ag-grid>
      </div>
    `;
  }
}
Tags:

2

Answers


  1. 0

    You must delete comments text from you code

     **specify the data** this.rowData = [    

**let the grid know which columns and what data to use** this.gridOptions

    also I think you fogot delete comma here:

    .gridOptions=${this.gridOptions}
    Login or Signup to reply.
  2. 0

    The constructor is too soon to get a reference to a rendered div. firstUpdated() would be a good place to do that. You also need to give the div an id ("myGrid") and you need to query for it in this.renderRoot rather than document.

    ag-grid also needs styles loaded for it to work so I’ve added link tags in the returned template below. This could be improved by grabbing the styles directly and wrapping it with css tag function to provide to the component as static styles instead.

    <script type="module">
import {html, LitElement} from 'https://unpkg.com/[email protected]?module';
import {Grid} from 'https://unpkg.com/[email protected]?module';

const columnDefs = [
  { field: "make" },
  { field: "model" },
  { field: "price" }
];

const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxster", price: 72000 }
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData
};

class MyElement extends LitElement {
  firstUpdated() {
    const gridDiv = this.renderRoot.querySelector('#myGrid');
    new Grid(gridDiv, gridOptions);
  }
  
  render() {
    return html`
      <!-- Include the core CSS, this is needed by the grid -->
      <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
      <!-- Include the theme CSS, only need to import the theme you are going to use -->
      <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
      <div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>
    `;
  }
}

customElements.define('my-element', MyElement);
</script>

<my-element></my-element>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search