Steps for showing an item in ag grid in Angular

Question

Steps for showing an item in ag grid in Angular

Cannot see the data being displayed. Here is the code snippet: Click here to view the code

list.component.ts

setAgGrid() {
    this.data.map((data: any) => {
      const date = new Date(data.date);
      const year = ('' + date.getFullYear()).slice(-2);
      const assetColIndex = data.assetCode + '_' + date.getMonth() + '_' + year;

      if (this.columns.indexOf(assetColIndex) === -1) {
        this.columns.push(assetColIndex);
      }
    });

    const dataByMonthYr = this.data.reduce((dataByMonthYear: any, datum: any) => {
        // Code continues here...
    }, []);

    this.columnDefs.sort((a: any, b: any) => {
      if (a.code < b.code) { return -1; }
      return 0;
    });


    console.log(this.columnDefs, dataByMonthYr);
    this.rowData.next(dataByMonthYr);
  }

How can I display the objects in ag grid?

I want the output to look like this: https://i.sstatic.net/dJpQZ.png

When trying to add

this.gridOptions.gridApi.setRowData(object)

, the gridApi or setRowData function is not recognized. Expected output: https://i.sstatic.net/AYrFi.png Thank you in advance.

javascript angular typescript

Answer 1

Answer №1

To properly display the object in row data, you must set it within the rowData object like this: [rowData]="rowData" within your TypeScript file, assign the object to rowData.

Alternatively, you can utilize the setRowData method: this.gridApi.setRowData(object);

If you need to customize how a cell is displayed, consider using a cellRenderer. You can find more information on this at https://www.ag-grid.com/javascript-grid-cell-rendering-components/

Answer 2

To properly display the object in row data, you must set it within the rowData object like this: [rowData]="rowData" within your TypeScript file, assign the object to rowData.

Alternatively, you can utilize the setRowData method: this.gridApi.setRowData(object);

If you need to customize how a cell is displayed, consider using a cellRenderer. You can find more information on this at https://www.ag-grid.com/javascript-grid-cell-rendering-components/

Answer 3

Answer №2

Reason for GridApi being undefined:

The reason why your GridApi is showing as undefined is because it has not been properly initialized.

To fix this, you need to include the gridReady event in your template like so:

(gridReady)="onGridReady($event)"

In your component, make sure to add the following code:

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

Solution for data not displaying:

https://i.sstatic.net/w8wxO.png

After reviewing the image provided: It seems that your columnDefs and rowData are not properly synced with what you want to display.

The issue lies in the fact that your columnDefs only contains one object with a 'code' field value.

You should add additional fields to match the columns you wish to display.

Ensure that the keys in your 'rowData' object names match the field names in your columnDefs.

You can remove the redundant call to setAgGrid from the ngOnInit method.

Note: Changing the hide property from false to true in your columnDefs will make your code column visible. There's no need to use BehaviorSubject, simply assign the array directly to your rowData.

Answer 4

Reason for GridApi being undefined:

The reason why your GridApi is showing as undefined is because it has not been properly initialized.

To fix this, you need to include the gridReady event in your template like so:

(gridReady)="onGridReady($event)"

In your component, make sure to add the following code:

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

Solution for data not displaying:

https://i.sstatic.net/w8wxO.png

After reviewing the image provided: It seems that your columnDefs and rowData are not properly synced with what you want to display.

The issue lies in the fact that your columnDefs only contains one object with a 'code' field value.

You should add additional fields to match the columns you wish to display.

Ensure that the keys in your 'rowData' object names match the field names in your columnDefs.

You can remove the redundant call to setAgGrid from the ngOnInit method.

Note: Changing the hide property from false to true in your columnDefs will make your code column visible. There's no need to use BehaviorSubject, simply assign the array directly to your rowData.

Answer 5

Answer №3

After examining the code, I have identified numerous issues ranging from syntax errors to logical errors. Utilizing my basic comprehension of the code, I have attempted to address these problems.

To ensure that the setAgGrid() method is called after the ag-Grid has been initialized, utilize the gridReady event of ag-Grid as shown below:

(gridReady)="onGridReady($event)"

In your component file, replace the OnInit method with a new function:

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

Additionally, modify the lines inside the setAgGrid() method like so (I included a new line of code and updated another line).

this.gridApi.setColumnDefs(this.columnDefs)
this.gridApi.setRowData(dataByMonthYr);

Substitute the if condition in the code with the following one, as the column definitions were not added to the columnDefs array due to an issue with the else condition within the two if cases.

if (colHeaderIndex !== -1) {
        const colIndex = this.columnDefs[colHeaderIndex]
          .children.findIndex((data: any) => data.field === assetColIndex);
        if (colIndex === -1) {
          this.columnDefs[colHeaderIndex].children.push(
            {
              'headerName': datum.assetCode,
              'field': assetColIndex,
              'aggFunc': this.customAggFunction
            }
          );
        }
      } else {
        this.columnDefs.push({
          headerName: monthYear,
          code: date.getMonth() + '_' + year,
          children: [
            // { headerName: "Style/Machine", field:   },
            { headerName: datum.assetCode, field: assetColIndex, width: 100, aggFunc: this.customAggFunction },
          ]
        });
      }

I encountered a similar outcome as described in your question. Additionally, I have developed a stackblitz demo which can be accessed here - https://stackblitz.com/edit/ag-grid-angular-hello-world-wcss8k

Answer 6

After examining the code, I have identified numerous issues ranging from syntax errors to logical errors. Utilizing my basic comprehension of the code, I have attempted to address these problems.

To ensure that the setAgGrid() method is called after the ag-Grid has been initialized, utilize the gridReady event of ag-Grid as shown below:

(gridReady)="onGridReady($event)"

In your component file, replace the OnInit method with a new function:

onGridReady(event){
 this.gridApi = event.api;
 this.setAgGrid();
}

Additionally, modify the lines inside the setAgGrid() method like so (I included a new line of code and updated another line).

this.gridApi.setColumnDefs(this.columnDefs)
this.gridApi.setRowData(dataByMonthYr);

Substitute the if condition in the code with the following one, as the column definitions were not added to the columnDefs array due to an issue with the else condition within the two if cases.

if (colHeaderIndex !== -1) {
        const colIndex = this.columnDefs[colHeaderIndex]
          .children.findIndex((data: any) => data.field === assetColIndex);
        if (colIndex === -1) {
          this.columnDefs[colHeaderIndex].children.push(
            {
              'headerName': datum.assetCode,
              'field': assetColIndex,
              'aggFunc': this.customAggFunction
            }
          );
        }
      } else {
        this.columnDefs.push({
          headerName: monthYear,
          code: date.getMonth() + '_' + year,
          children: [
            // { headerName: "Style/Machine", field:   },
            { headerName: datum.assetCode, field: assetColIndex, width: 100, aggFunc: this.customAggFunction },
          ]
        });
      }

I encountered a similar outcome as described in your question. Additionally, I have developed a stackblitz demo which can be accessed here - https://stackblitz.com/edit/ag-grid-angular-hello-world-wcss8k

Steps for showing an item in ag grid in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble getting the styles property to work in the component metadata in Angular 2?

How to Retrieve the Following Element in a Table Using Javascript

Creating a 24-hour bar chart using Flot Javascript, showcasing data points at each hour mark

JMeter recording displays a script alert error notification

Why is the type of parameter 1 not an 'HTMLFormElement', causing the failure to construct 'FormData'?

Unable to retrieve a method from the model class in Angular 4

Progress bar for uploading files

The issue arises when attempting to make an Ajax request after changing the value of a cascading dropdown

How to Identify Clicks within Nested Divs in Angular 4+ and Differentiate them from External Divs

ReactAwesome Slider Autoplay Feature

Acquiring data from a server using React and Express: Fixing the error "TypeError: Cannot read property '' of undefined"

What could be causing the React state not to update properly?

When capturing photos using h5 on iOS devices, the browser may experience a flash back issue

Nuxt.js ERROR: Unable to find reference to 'window' object

The HTML image is not updating, the function does not appear to be triggering

Sending handlebars variable to the client-side JavaScript file

Create a React Native layout with a set width and the ability to stretch to fill

Presenting Ajax Sample Outcomes while the Form is Loading

A guide on exporting table data to PDF and enabling printing features in Angular 7

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php