Ag grid vs Ag grid community

Help Requests
1

I am trying to use ag-grid-community instead of ag-grid, and I am running into problems.

The main problem is that I have a blank grid, instead of it showing data.

I followed this reccommendation: https://www.ag-grid.com/javascript-grid-npm/

But when I use import {Grid} from '@ag-grid-community/all-modules';, I get the following error:

ERROR in ./src/customer.js
Module not found: Error: Can't resolve '@ag-grid-community/all-modules' in '/home/employees/rhys/aris1/src'
 @ ./src/customer.js 19:0-54 861:30-34
 @ ./src/app.js
 @ ./src/login.js
 @ ./src/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

If I use import {Grid} from 'ag-grid-community';, I get a blank grid.

I can print out the values and see the data that should be in the grid, and it is sized as though there is data, but it’s blank.

Here’s my html declaration of the grid:

<div id="phoneGrid" style="height: 800px;width: 800px" class="ag-theme-alpine">
                                </div>

Here’s my js code:

imports and includes:

import {Grid} from 'ag-grid-community';
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';

grid initialization:

    async initGrid()
    {
//      console.log('initgrid', this);
      
      this.columnDefinitions = [
        {
          checkboxSelection: true,
        },
        {headerName: 'Name', 
          field: 'descr', 
          unSortIcon: true,
          width: 100,
          editable: true,
          rowDrag: true,
          valueGetter: function(params) {
            //debugger;
            console.log('descr', params.data.descr);
            return params.data.descr;
          },
          valueSetter: function(params) {
            if ( params.descr != params.newValue)
            {
              //debugger;
              params.data.descr = params.newValue;
              document.form.saveDbtr.disabled = false;
            }
            else
            {
              return params.data.descr;
            }            

            return true;
          },
          //checkboxSelection: true,
        },
        {headerName: 'Phone/Fax/Email', 
          field: 'phone', 
          editable: true, 
          width: 180,
          valueGetter: function(params) {
            return params.data.phone;
          },
          valueSetter: function(params) {
            if ( params.phone != params.newValue)
            {
              params.data.phone = params.newValue;
              document.form.saveDbtr.disabled = false;
            }
            else
            {
              return params.data.phone;
            }            
            return true;
          }, },
        {headerName: 'Type', 
          field: 'type', 
          editable: true, 
          width: 50, 
          valueGetter: function(params) {
            return params.data.type;
          },
          valueSetter: function(params) {
            if ( params.type != params.newValue)
            {
              params.data.type = params.newValue;
              document.form.saveDbtr.disabled = false;
            }
            else
            {
              return params.data.type;
            }            
            return true;
          },
          cellRenderer: this.phoneSelect,
        },
        {headerName: 'Status', 
          field: 'status', 
          editable: true, 
          width: 80, 
          valueGetter: function(params) {
            return params.data.status;
          },
          valueSetter: function(params) {
            if ( params.status != params.newValue)
            {
              params.data.status = params.newValue;
              document.form.saveDbtr.disabled = false;
            }
            else
            {
              return params.data.status;
            }            
            return true;
          },
          cellRenderer: this.phoneStatusSelect,
        },
        {field: 'debtor_id', hide: true},
        {field: 'item_no', hide: true},
        {field: 'time_stamp', hide: true},
        {field: 'user_id_stamp', hide: true},
        {field: 'source', hide: true},
        {field: 'source_id', hide: true},
        {field: 'archive', hide: true},
        {field: 'group_id', hide: true},
        {headerName: 'Contact Type', 
          field: 'contact_type', 
          editable: true,
          width: 80, 
          cellRendererParams: { value: this.contactType } ,  
          valueGetter: function(params) {
            return params.data.contact_type;
          },
          valueSetter: function(params) {
            if ( params.contact_type != params.newValue)
            {
              params.data.contact_type = params.newValue;
              document.form.saveDbtr.disabled = false;
            }
            else
            {
              return params.data.contact_type;
            }            
            return true;
          },
          cellRenderer: this.contactTypeSelect},
      ];


      this.gridOptions = {
        context: {parentComponent: this},
        columnDefs: this.columnDefinitions,
        
        defaultColDef: {
          width: 100,
          sortable: true,
        },
        rowData: this.phone_list,
        rowSelection: 'single',
        rowDragManaged: true,
        animateRows: true,
      };


      var eGridDiv = document.querySelector('#phoneGrid');
      
      this.grid = new Grid(eGridDiv, this.gridOptions);
//      console.log('new grid', eGridDiv);

      this.gridOptions.api.setRowData(this.phone_list);
      this.gridOptions.api.refreshCells();
//      console.log('phone_list', this.phone_list); 
    }

This all started because I was trying to add drag/drop capability and sorting to the grid. I discovered that ag-grid is outdated, and so moved to install the new ag-grid-community via npm.

Thanks in advance.

2

@rhysshadow
Totally out of subject… but have you heard about my lib (Aurelia-slickgrid) for Aurelia? I also wrote a blog post few months ago. I got most of the features that Ag-Grid offers (even the paid features) and mine is totally free and Open Sourced (I also welcome any contributions).

Ag-Grid is nice but the community version is lacking so many features… anyhow, good luck with all.

2 Likes
3

first, instead of using var eGridDiv = document.querySelector('#phoneGrid'); use the aurelia ref attribute.

when are you running this code? (the DOM element will be available only in the attached life cycle)

4

What is the aurelia ref attribute?

I am running this after the DOM is loaded, because I need input from another form to lookup a customer, and then display that.

It was working fine this way with the ag-grid, but not ag-grid-community.

5

@ghiscoding - I tried slickgrid, but was unable to get it to load a grid.

We tried talking about it in another post, but I could not use the attached() method to display the grid, and I wasn’t able to figure out how to do it with a promise.

That’s how I ended up with ag-grid-community.

6

I figured it out.

I was including this line:

import 'ag-grid-community/dist/styles/ag-grid.css';

When I looked at the grid I was creating, it had all the rows inside it, so I figured out it was a css problem.

When I include the following line:

import "ag-grid/dist/styles/ag-grid.css";

It works.

1 Like
7

ref(https://aurelia.io/docs/binding/basics#referencing-elements) is a way of getting a reference to a DOM element, without using the querySelector.
think of it this way… aurelia binding engine is responsible for creating your html out of templates.
so asking for a ref, tells aurelia to store a reference to the created DOM while creating it.
instead of creating it, attaching it to the DOM, and then “scan” the dom o find the particular DOM element you just “put” there a second ago.

also, this eliminated the problem of having to specify a different ID for each instance etc.

1 Like