data doesnt load with initial grouping set up

pk

Asked On May 24, 2019 05:53 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On May 27, 2019 09:11 AM UTC

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.

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.
Please share the screenshot or video demonstration of the issue.
Syncfusion package version.

Regards,

Thavasianand S.

Reply | Reply with quote

pk

Replied On May 27, 2019 03:09 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On May 28, 2019 05:21 PM UTC

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.

Reply | Reply with quote

pk

Replied On May 28, 2019 07:45 PM UTC

that did it!

thanks

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On May 29, 2019 06:57 AM UTC

Hi Pablo,

Thanks for your update.

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

Regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144838	May 24,2019 05:53 PM UTC	May 29,2019 06:57 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US