jqxPivotGrid expand rows and columns

[weibaoParticipant]

When I run the following code, the pivot grid is able to populate data from a remote server. But the first row and column never get expanded. Where should I execute the functions to expand rows & columns?

ngAfterViewInit(): void {
this.myService.getData()
.subscribe(data => {
this.createPivotDataSource(data);
}, err => {
console.log(err);
});

this.pivotGrid1.getPivotRows().items[0].expand();
this.pivotGrid1.getPivotColumns().items[0].expand();
}

[TodorParticipant]

Hello weibao,

You execute the functions in the right place – ngAfterViewInit. You didn’t show the whole code, but to be able to use this.pivotGrid1.getPivotRows().items[0].expand(); you have to add the following:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
...
export class AppComponent {
    @ViewChild('pivotGrid1') pivotGrid1: jqxPivotGridComponent;
    ...
    constructor() { ... }

    ngAfterViewInit(): void {
      ....
      this.pivotGrid1.getPivotRows().items[0].expand();
    }

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[weibaoParticipant]

I got this error message: ERROR TypeError: Cannot read property ‘expand’ of undefined

Here’s my whole code:

import { Component, ViewChild, OnInit, AfterViewInit } from ‘@angular/core’;
import { jqxPivotGridComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxpivotgrid’;
import { jqxButtonComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons’;
import { ScenarioDetail } from ‘../models/scenarioDetail.model’;
import { ScenarioDetailService } from “../scenario-detail.service”;

@Component({
selector: ‘app-scenario-detail’,
templateUrl: ‘./scenario-detail.component.html’,
styleUrls: [‘./scenario-detail.component.css’],
})
export class ScenarioDetailComponent implements OnInit, AfterViewInit {
@ViewChild(‘pivotGrid1’) pivotGrid1: jqxPivotGridComponent;

scenarioDetails: ScenarioDetail[];
gridData;
pivotDataSource;
source;
dataAdapter;

constructor(private scenariodetailService: ScenarioDetailService) {
this.createPivotDataSource(null);
}

ngAfterViewInit(): void {
this.scenariodetailService.getDefaultScenario()
.subscribe(data => {
this.createPivotDataSource(data);
}, err => {
console.log(err);
});

this.pivotGrid1.getPivotRows().items[0].expand();
this.pivotGrid1.getPivotColumns().items[0].expand();
}

[weibaoParticipant]

It seems like that this.pivotGrid1.getPivotRows().items[0].expand() runs before this.createPivotDataSource(data)

[TodorParticipant]

Hello weibao,

Try to move the two rows inside the subscription:

ngAfterViewInit(): void {
this.scenariodetailService.getDefaultScenario()
.subscribe(data => {
    this.createPivotDataSource(data);

    this.pivotGrid1.getPivotRows().items[0].expand();
    this.pivotGrid1.getPivotColumns().items[0].expand();
}, err => {
console.log(err);
});

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[weibaoParticipant]

not working. still got the same error: Cannot read property ‘expand’ of undefined.
when this.pivotGrid1.getPivotRows().items[0].expand() is called, this.PivotGrid1 is not available yet.

[weibaoParticipant]

Please ignore the reply above and see this one.

not working. still got the same error: Cannot read property ‘expand’ of undefined.
when this.pivotGrid1.getPivotRows().items[0].expand() is called, this.PivotGrid1.getPivotRows.items doesn’t return any items.

[TodorParticipant]

Hello weibao,

You could try to move the two lines of code in setTimeout. If that doesn’t fix the problem, could you please provide an codesandbox example with your code then we would be able to properly investigate it.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[weibaoParticipant]

yes, it works if I move the code to setTimeout. But why?
Also, the pivotGrid has 1422 rows. When this.pivotGrid1.getPivotRows().items[0].expand() is called, the whole expandable column disappears. It comes back until I click any cell in the grid. Is it a bug?

[TodorParticipant]

Hello weibao,

It works because the data is loaded asynchronously through your service and there is a little delay.
Could you please provide an example which shows this behavior?

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts