data doesnt load with initial grouping set up

[pk]

Hi

I'm loading my grid on a subscription callback and apparently, if I set an initial group setting, the data doesnt appear in the grid. Also, if I reset the data of the grid from an external control, if the grid already has grouping, the records dont get load in the grid (even that, in both cases, the bottom pager shows the amount of recors I fetched..)

ts:

[init]

public groupOptions: GroupSettingsModel;

[ngOnInit]

this.groupOptions = { columns: ['contact'] };

[service for loading data]

public getGridData(searchState) {

    this.myService.getData(searchState).subscribe(res => {

      this.dataGrid = res; //has result & count

    });

  }

html:

<ejs-grid #grid [dataSource]='dataGrid' [groupSettings]='groupOptions' [allowPaging]="tru ...

Any clue? thanks

[Thavasianand Sankaranarayanan]

Hi Pablo, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and suspect that the data source does not properly bound to the Grid when the Grid will try to perform initial Grouping. So we suggest to render the Grid component after getting the data source properly from your service. In the below code we have used ngIf to ensure the data source before the Grid will getting render. So please use this solution to resolve this issue. 

<ejs-grid #grid [dataSource]='data' *ngIf='data.length'> 

           ... 

</ejs-grid> 

Still If you facing the same issue, please share the following details to us. This will help us to provide a better solution for this issue as early as possible. 

1. First, we suggest to bind the actionFailure event to the Grid and ensure whether this event will invoke. If this event will invoke then you can find the cause of this issue easily in this event arguments. Because this event will trigger only when any Grid action failed to achieve the desired results.  Also, please share this event argument details to us.
2. Please share the screenshot or video demonstration of the issue.
3. Syncfusion package version.

Regards, 

Thavasianand S. 

[pk]

Hi again, the error I'm having:

name: "actionFailure"

message: "Cannot read property 'cells' of undefined"

stack: "TypeError: Cannot read property 'cells' of undefined

at ContentRender.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/content-renderer.js.ContentRender.refreshContentRows (http://localhost:16318/vendor.js:152487:105) at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.dataManagerSuccess (http://localhost:16318/vendor.js:156361:34) at http://localhost:16318/vendor.js:156193:54 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:16318/polyfills.js:2749:26) at Object.onInvoke (http://localhost:16318/vendor.js:53422:33) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:16318/polyfills.js:2748:52) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:16318/polyfills.js:2508:43) at http://localhost:16318/polyfills.js:3247:34 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:16318/polyfills.js:2781:31) at Object.onInvokeTask (http://localhost:16318/vendor.js:53413:33)"

I´m using "@syncfusion/ej2-angular-grids": "^17.1.41",

my grid, html:

<ejs-grid #grid [dataSource]='dataGrid' *ngIf="dataGrid && dataGrid.result.length" [groupSettings]='groupOptions' [allowPaging]="true" [pageSettings]='pageSettings' [filterSettings]='filterOptions' [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" height=400 [allowResizing]='true' (dataStateChange)='dataStateChange($event)' [rowHeight]='24' (queryCellInfo)='tooltip($event)' (actionFailure)="gridActionFailure($event)" > <e-columns> <e-column field='contact' headerText='Contact' textAlign='left' width=200></e-column> [...other cols...] </e-columns> </ejs-grid>

the ts code is a big peace.. I have two ways to trigger the service (observable that loads the grid - not as subject - being subscribed).

[component class deff]

public groupOptions: GroupSettingsModel;

[component class ngOnInit]

this.groupOptions = { columns: ['contact'] };

[component function, I call this one form the ngOnInit, from a submit event and form a change event, the searchState is a custom request of mine, is not a DataStateChangeEventArgs, but I take some stuff from there as well in an event change]

public getGridData(searchState) { this.service.getData(searchState).subscribe(res => { this.dataGrid = res; }); }

[service]

public getData(state: Request): Observable<any> {

    const results = 'xyz';

    const count = 'count';

    return this.http

      .post(`${this.baseUrl}api/users/getxyz`, state, this.httpOptions).pipe(

        tap(res => console.log(res)),

        map((response: any) => ({

          result: response[results],

          count: response[count]

        }))

      );

  }

could you show me the proper way, in an angular grid load with observable, how to use the initial grouping?

like this one, with the initial grouping.

Thanks

[Thavasianand Sankaranarayanan]

Hi Pablo, 

Thanks for the update. 

We suspect that you did not handled the initial grouping in your service. So you have faced this issue. To resolve this, we suggest to group the data source before it will be assigned to Grid. You can group the data source easily by using DataUtil.group method of the DataManager. Please refer the following code snippet, 

App.component.ts 

 

                                  ... 

 

public ngOnInit(): void { 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 

        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

        this.groupOptions = { columns: ['id'] }; 

        const state: any = { skip: 0, take: 12, group: (this.groupOptions as any).columns }; // passed the initial group columns to service 

        this.crudService.execute(state); 

    } 

 

 

Crud.service.ts 

 

import { DataUtil } from '@syncfusion/ej2-data'; 

import { isNullOrUndefined } from '@syncfusion/ej2-base'; 

 

                                     ... 

 

getAllData( state ?: any): Observable<any[]> { 

    return this.http.get<Customer[]>(this.customersUrl) 

      .map((response: any) => (<any>{ 

// 'DataUtil.group' groups the input data based on the field name 

        result: state.take > 0 ? !isNullOrUndefined(state.group) ? DataUtil.group(response.slice(0, state.take), state.group[0]) :  response.slice(0, state.take) : response, // Grouped the datasource by using DataUtil.group method and returned the grouped records to Grid 

        count: response.length 

      })) 

      .map((data: any) => data); 

  } 

 

Regards, 

Thavasianand S. 

[pk]

that did it!

thanks

[Thavasianand Sankaranarayanan]

Hi Pablo, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.