We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

data doesnt load with initial grouping set up

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
loading
Tags: Grid
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

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. 

  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
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


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. 


pk
Replied On May 28, 2019 07:45 PM UTC

that did it!
thanks

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon