# Error when using Datagrid

**URL:** <https://community.cumulocity.com/t/error-when-using-datagrid/7881>\
**Category:** Forum\
**Tags:** data-grid, web-development, app-enablement\
**Created:** [December 20, 2024, 3:04pm UTC](https://community.cumulocity.com/t/error-when-using-datagrid/7881 "2024-12-20T15:04:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marco\_Stoffel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/marco_stoffel/32/19453_2.png) [@Marco\_Stoffel](https://community.cumulocity.com/u/Marco_Stoffel)\
**Post date:** [December 20, 2024, 3:04pm UTC](https://community.cumulocity.com/t/error-when-using-datagrid/7881/1 "2024-12-20T15:04:30Z")

</div>

Hi experts,

i have a web-sdk 1018.0.37 application using ad datagrid. Everything looks good to me but I get the follwoing error:

```auto
ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at DataGridComponent_Template (ɵcmp.js:336:5)
    at executeTemplate (core.mjs:12199:9)
    at refreshView (core.mjs:12062:13)
    at refreshComponent (core.mjs:13157:13)
    at refreshChildComponents (core.mjs:11852:9)
    at refreshView (core.mjs:12112:13)
    at refreshComponent (core.mjs:13157:13)
    at refreshChildComponents (core.mjs:11852:9)
    at refreshView (core.mjs:12112:13)
    at refreshEmbeddedViews (core.mjs:13111:17)

```

When I remove the datagrid component the error is gone. I never reaches my service call etc.

html

```auto
<div class="aggregation-table">
    <c8y-data-grid
    [title]="title"
    [columns]="columns"
    [rows]="data"
    class="content-fullpage d-flex d-col border-top border-bottom"
  ></c8y-data-grid>
</div>

```

```javascript
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MonthPickerService } from '../../utitities/statistics-action-bar/month-picker/month-picker.service';
import { DeviceStatisticsService } from '../device-statistics.service';
import { gettext } from '@c8y/ngx-components';
import {
  Column,
  CoreModule
} from "@c8y/ngx-components";
import { DeviceGridModule } from "@c8y/ngx-components/device-grid";          

@Component({
  selector: 'device-aggregation',
  templateUrl: './device-aggregation.component.html',
  styleUrls: ['./device-aggregation.component.css'],
  imports: [CoreModule, DeviceGridModule],
})
export class DeviceAggregationComponent implements OnInit, OnDestroy {
 
  constructor(
    private monthPickerService: MonthPickerService,
    private deviceStatisticsService: DeviceStatisticsService,
  ) { }

  monthChangedSubscription: Subscription
  data= [
    {
      "className": "Class A",
      "avgMinMea": 0,
      "avgMaxMea": 24,
      "monthlyThreshold": 200,
      "count": 6187
    },
    {
      "className": "Class B",
      "avgMinMea": 24,
      "avgMaxMea": 144,
      "monthlyThreshold": 200,
      "count": 110
    },
    {
      "className": "Class C",
      "avgMinMea": 144,
      "avgMaxMea": 1440,
      "monthlyThreshold": 50,
      "count": 620
    },
    {
      "className": "Class D",
      "avgMinMea": 1440,
      "avgMaxMea": 8640,
      "monthlyThreshold": 50,
      "count": 65
    },
    {
      "className": "Class E",
      "avgMinMea": 8640,
      "avgMaxMea": 86400,
      "monthlyThreshold": 50,
      "count": 8
    },
    {
      "className": "Class F",
      "avgMinMea": 86400,
      "avgMaxMea": "INFINITY",
      "monthlyThreshold": 50,
      "count": 0
    }
  ];

  deviceData: any;
  

  title = "Device Aggregation";

  columns: Column[] = [
    {
      name: "className",
      header: "Device Class",
      path: "className",
      filterable: true,
    },
    {
      name: "avgMinMea",
      header: "Min Mea",
      path: "avgMinMea",
      filterable: true,
    },
    {
      name: "avgMaxMea",
      header: "Max Mea",
      path: "avgMaxMea",
      filterable: true,
    },
    {
      name: "count",
      header: "Total",
      path: "count",
      filterable: true,
    },
  ];

  ngOnInit(): void {
    
    try {
      this.monthChangedSubscription = this.monthPickerService.dateChanged.subscribe(async (selectedDate: Date) => {
       this.deviceData = await this.deviceStatisticsService.getMonthlyDeviceAggregation(selectedDate)
       console.log("###### Data: " + JSON.stringify(this.data))
    // this.data = this.deviceData['totalDeviceClasses'] removed for static content
      })
    
    }
    catch (err) {
      console.log(gettext('Error creating table'))
      console.error(err.message)
    }
  }

  ngOnDestroy(): void {
    if (this.monthChangedSubscription) {
      this.monthChangedSubscription.unsubscribe()
    }
  }
}

```

Any hint would really help me.

Thanks,

Marco