1. Home
  2. Forum
  3. Angular - EJ 2
  4. dataGrid event behaviour

dataGrid event behaviour

Hi,

I managed to get datagrid functionally working with async pipe example, in terms of add, edit and delete at backend using DataService and event handlers for DataStateChangeEventArgs and DataSourceChangedEventArgs. However, I see 2 behaviours that are purely grid ui component (because there are no errors or other logs on console) that is unexpected/unwanted. I hope you can advise on how to address them correctly.

1. Adding a new row doesnt automatically close the dialog and it appears the process is hanging infinitely.
* I am using toolbar for add, edit, delete with this code> tblToolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
* I am using edit mode as dialog with this code> tblEditSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
* In my event handlers, I am explicitly calling event.endEdit(); and event.cancelEdit(); for add, edit and delete scenarios. I do not find any other methods in DataSourceChangedEventArgs instance I recieve in my handler methods.

From my code logs in console, I can see the add event is gracefully and successfully completed, including event.endEdit() call. Only after that, the grid calls the handler for DataStateChangeEvent, which then loads the new data on the grid. However, the dialog is never closing by itself and I have to manually cliock on cancel which is semantically confusing for the end-user. How do I address this properly?

2 Grouping creates another grouping after DataStateChangeEvent fetching new data.
* I have setuip an initial grouping with this code> tblGroupSettings: GroupSettingsModel = { showDropArea: false, columns: ['col'], disablePageWiseAggregates: false };
* In my data service, I am addressing the group construct with this code> return (isNullOrUndefined(state.group)) ? spliced :
                    Array.isArray(state.group) ? DataUtil.group(spliced, state.group[0]) : DataUtil.group(spliced, state.group);
The reason for the second macro invoking DataUtil.group is that, the state.group comes with ['col'] (an array) for the initial load, while 'col' for the subsequent load after successful add operation.
Regardless of this handling, the subsequent loads always make another level of grouping for the same column in the grid. How do I fix this properly?

Thanks and best regards,
Sathya

9 Replies
PS Pavithra Subramaniyam Syncfusion Team September 18, 2019 09:14 AM UTC

Hi Sathyanarayanan, 

Thanks for contacting Syncfusion support. 

Query: Adding a new row doesnt automatically close the dialog 
 
We have already fixed “Edit dialog does not destroyed after performing add operation with custom binding” the issue. We suspect in your application, you are using old version. If so we suggest you to upgrade to the latest version to resolve the problem. 



Query: Grouping creates another grouping after DataStateChangeEvent fetching new data. 

By default, we have performed grouping in client side(source level) while using remote data based on the sorted data. Could you please share more information about your query and if possible share the sample or video to demonstrate the problem that will helpful for us to validate further at our end. 
 
Regards, 
Pavithra S. 


SS Sathyanarayanan Srinivasan September 22, 2019 11:56 PM UTC

Hi Pavithra,

Thanks for our help.I got backl to this issue and tried several options based on our hints.... Still the situation on both items remain the same....

Query: Adding a new row doesnt automatically close the dialog 
We have already fixed “Edit dialog does not destroyed after performing add operation with custom binding” the issue. We suspect in your application, you are using old version. If so we suggest you to upgrade to the latest version to resolve the problem. 
[Satnar] I followed the link and understand this bug was fixed in v16.4.52. I am using v17.2.51 (from my package.json). Is there a possibilit that this bug resurfaced or is there any other related packages that I need to watch out for? I had installed all syncfusion packages only in the last 2 weeks and have nevertheless updated all npm packages using the link you had provided. Now all my packages are v17.2.xx. I am listing a segment (covering all snmcfusion npm pakages) of my package.json here...
    "@syncfusion/ej2-angular-buttons": "^17.2.47",
    "@syncfusion/ej2-angular-calendars": "^17.2.49",
    "@syncfusion/ej2-angular-dropdowns": "^17.2.49",
    "@syncfusion/ej2-angular-grids": "^17.2.51",
    "@syncfusion/ej2-angular-inputs": "^17.2.51",
    "@syncfusion/ej2-angular-layouts": "^17.2.49",
    "@syncfusion/ej2-angular-navigations": "^17.2.49",
    "@syncfusion/ej2-angular-popups": "^17.2.47",
    "@syncfusion/ej2-angular-splitbuttons": "^17.2.47",
    "@syncfusion/ej2-angular-treegrid": "^17.2.51",
    "@syncfusion/ej2-layouts": "^17.2.49",

Query: Grouping creates another grouping after DataStateChangeEvent fetching new data. 
By default, we have performed grouping in client side(source level) while using remote data based on the sorted data. Could you please share more information about your query and if possible share the sample or video to demonstrate the problem that will helpful for us to validate further at our end. 
[Satnar] Based on our input, I have now removed the group setttings but enabled grouping alone in my html. It looks like below now.
<ejs-grid #cfgView id="cfgView" height='300px' 
            [dataSource]="tblDataSource | async"
            [editSettings]="tblEditSettings"
            [toolbar]="tblToolbarOptions" [allowFiltering]="true" 
            [allowSorting]="true" [sortSettings]="tblSortSettings"
            [allowPaging]="true" [pageSettings]="tblPagingSettings" 
            [allowGrouping]="true" 
            (actionFailure)="viewFailed($event)"
            (dataStateChange)='refreshView($event)' (dataSourceChanged)='handleCRUDEvent($event)'>

In my data service...
Scenario 1: when I return data without DataUltil, the grouping does not happen at all. 
                let totalCount = data.length;
                let spliced = [];
                if (data.length > state.skip + state.take) {
                    spliced = data.slice(state.skip, state.skip + state.take);
                } else {
                    spliced = data.slice(state.skip, data.length);
                }
                return spliced;

Scenario 2: when I use DataUtil no records are displayed
                let totalCount = data.length;
                let spliced = [];
                if (data.length > state.skip + state.take) {
                    spliced = data.slice(state.skip, state.skip + state.take);
                } else {
                    spliced = data.slice(state.skip, data.length);
                }
                return DataUtil.group(spliced, state.group[0]);

Scenario 3: only when I add the group settings back to the html, the records are discplayed but after the CRUD event, the double grouping occurs.
// HTML Code
          <ejs-grid #cfgView id="cfgView" height='300px' 
            [dataSource]="tblDataSource | async"
            [editSettings]="tblEditSettings"
            [toolbar]="tblToolbarOptions" [allowFiltering]="true" 
            [allowSorting]="true" [sortSettings]="tblSortSettings"
            [allowPaging]="true" [pageSettings]="tblPagingSettings" 
            [allowGrouping]="true" [groupSettings]="tblGroupSettings" 
            (actionFailure)="viewFailed($event)"
            (dataStateChange)='refreshView($event)' (dataSourceChanged)='handleCRUDEvent($event)'>

// Component Code
  // handle view and controller state...
  state: DataStateChangeEventArgs = { skip: 0, take: 15, group: ['col'] };
  tblGroupSettings: GroupSettingsModel;

onInit() {
this.tblGroupSettings = { showDropArea: false, columns: ['col'], disablePageWiseAggregates: false };
}

I am sure I am missing something from the documentation and samples. Your help in fixing this is highl appreciated.

Thanks and best regards,
Sathya


PS Pavithra Subramaniyam Syncfusion Team September 23, 2019 10:20 AM UTC

Hi Sathyanarayanan, 
 
Thanks for your update. 
 
Query: Adding a new row doesnt automatically close the dialog 
 
We have validated with our end and we considered “Edit dialog does not close after performing add operation with custom binding” as a bug and logged a report for the same. We will include the defect  fix in our upcoming releases which is expected to be release on October first week. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 
 
Until then we suggest you to use the below way to resolve the reported problem. In the below code example, we have notify recordAdded event once data added in server. 
 
public dataSourceChanged(state: DataSourceChangedEventArgs): void { 
        if (state.action === 'add') { 
            this.crudService.addRecord(state).subscribe(() => 
            {   
              this.grid.notify('recordAdded', state);     // close the dialog 
              state.endEdit()}); 
        } 
              . . . . . . . 
        } 
    } 
 
 
 
Query: Grouping creates another grouping after DataStateChangeEvent fetching new data.  
 
For your reference, we have created a sample and enable grouping for Grid its working fine. Could you please refer the below sample for more information. 
 
 
Do you want to apply initial grouping for Grid? If possible can you please share your sample(or reproduce in our sample) and video to demonstrate the problem that will helpful for us to validate further at our end and to provide a better solution as soon as possible. 
 
Regards, 
Pavithra S. 


SS Sathyanarayanan Srinivasan September 24, 2019 09:48 AM UTC

Thanks Pavithra... I will check on the hint for notify('recordAdded'). Just checking if I should use any other event to indicate the 'Cancel' when record CRUD operation failed. Just to ensure consistncy and integrity between the backend and grid ui.

As for the grouping issue, I have made the screen capture video. And I am pasting relevant code snippets related to the grid screen here with. The data service code is already shared earlier.
// HTML Code
     <ejs-grid #cfgView id="cfgView" height='300px' 
            [dataSource]="tblDataSource | async"
            [editSettings]="tblEditSettings"
            [toolbar]="tblToolbarOptions" [allowFiltering]="true" 
            [allowSorting]="true" [sortSettings]="tblSortSettings"
            [allowPaging]="true" [pageSettings]="tblPagingSettings" 
            [allowGrouping]="true" [groupSettings]="tblGroupSettings"
            (actionFailure)="viewFailed($event)"
            (dataStateChange)='refreshView($event)' (dataSourceChanged)='handleCRUDEvent($event)'>
            <e-columns>
                <e-column field="s" headerText="Section" [isPrimaryKey]="true" textAlign="Left" width="30%">e-column>
                <e-column field="n" headerText="Property"  [isPrimaryKey]="true" textAlign="Left" width="30%">e-column>
                <e-column field="v" headerText="Value" textAlign="Left" width="30%">e-column>
                
            e-columns>
        ejs-grid>

// Component Code

     // model/ data binding...
     tblDataSource: Observable<DataStateChangeEventArgs>;

     // handle view...
     @ViewChild('cfgView', { static: false }) cfgView: GridComponent;
     tblToolbarOptions: ToolbarItems[];
     tblEditSettings: EditSettingsModel;
     tblSortSettings: SortSettingsModel;
     tblPagingSettings: PageSettingsModel;
     tblGroupSettings: GroupSettingsModel;

     // handle view and controller state...
     state: DataStateChangeEventArgs = { skip: 0, take: 15, group: ['s'] };

     ngOnInit() {
    this.tblSortSettings = {
      columns: [
        { field: 's', direction: 'Ascending' },
        { field: 'n', direction: 'Ascending' }]
    };
    this.tblPagingSettings = { pageSize: 15 };
    this.tblToolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    this.tblEditSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
    this.tblGroupSettings = { showDropArea: false, columns: ['s'], disablePageWiseAggregates: false };

    console.log('Going to invoke initial load of config...');
    this.tblDataSource = this.config;
    this.config.execute(this.state);
  }

  viewFailed(event: any) {
    console.log('Check whats happening... ' + JSON.stringify(event));
  }

  refreshView(newState: DataStateChangeEventArgs) {
    console.log('UI DataState has changed...');
    this.config.execute(newState);
  }

  handleCRUDEvent(crudEvent: DataSourceChangedEventArgs) {
    console.log('UI Data has changed...');
    
    if (crudEvent.action === 'add' || crudEvent.action === 'edit') {
      this.saveSetting(crudEvent);
    } else if (crudEvent.requestType === 'delete') {
      this.deleteSetting(crudEvent);
    }
  }

  saveSetting(save: DataSourceChangedEventArgs): void {
    let scsResult: string;
    const fromUI = save.data as ConfigSetting;
    const setting = new ConfigSetting(fromUI.s, fromUI.n, fromUI.v);
    
    const suScsEndpoint = env.urls.api.su.suSaveCfgSetting;
    this.client.put(suScsEndpoint, setting)
      .subscribe(
        (data: string) => scsResult = data,
        error => () => { console.error('Save config setting failed. Cause: ' + error); save.cancelEdit(); },
        () => {
          console.log('Save Setting Service Response: ' + scsResult);
          if (scsResult !== null) {
            this.cfgView.notify('recordAdded', save);     // close the dialog
            save.endEdit();
            console.log('Acknowledged the save event!');
          } else {
            save.cancelEdit();
            console.log('Rejected the save event!');
          }
          this.spinner.hide();
        }
      );
  }

  deleteSetting(toDelete: DataSourceChangedEventArgs): void {
    const settings = toDelete.data as ConfigSetting[];
    const suDcEndpoint = env.urls.api.su.suDeleteCfgSettings;
    let dcsResult: string = null;
    this.client.put(suDcEndpoint, settings)
      .subscribe(
        (data) => dcsResult = data,
        error => () => { console.error('Failed deleting config. Cause: ' + error); toDelete.cancelEdit(); },
        () => {
          console.log('Delete Setting Service Response: ' + JSON.stringify(dcsResult));
          if (dcsResult !== null) {
            this.cfgView.notify('recordDeleted', toDelete);     // close the dialog
            toDelete.endEdit();
          } else {
            toDelete.cancelEdit();
          }
          this.spinner.hide();
        }
      );
  }



Attachment: grid_additoinalGrouping.mov_9ea56c55.zip

PS Pavithra Subramaniyam Syncfusion Team September 25, 2019 01:03 PM UTC

Hi Sathyanarayanan, 
 
Thanks for your update. 
 
Query#1: Just checking if I should use any other event to indicate the 'Cancel' when record CRUD operation failed. Just to ensure consistncy and integrity between the backend and grid ui. 
 
By default calling the “state.cancelEdit()” method will not close the edit state in order to make the user to give the correct data. Could you please confirm that you want to close the Edit dialog when calling the cancelEdit method. 
 
Query#2: As for the grouping issue, I have made the screen capture video. And I am pasting relevant code snippets related to the grid screen here with. The data service code is already shared earlier. 
 
We have validated the provided information and checked with our end and we suggest you to use the below way to resolve the reported problem(before perform group with DataUtil check other grid actions are performed or not). Please refer the below code example for more information. 
 
return this.http 
.get(`${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`) 
.pipe(map((response: any) => response.json())) 
.pipe(map((response: any) => { 
  return state.dataSource === undefined ? (<DataResult>{ 
    result: this.getResult(response), 
    count: parseInt(response['@odata.count'], 10), 
  }) : response['value']; 
})) 
.pipe(map((data: any) => data)); 
} 
 
public getResult(response) { 
//  group the column based on the condition 
if (this.gridState.group != undefined && (this.gridState.action == undefined || this.gridState.action.rows != undefined)) { 
var json = response['value']; 
this.gridState.group.forEach(element => { 
  // 'DataUtil.group' groups the input data based on the field name 
  json = DataUtil.group(json, element); 
}); 
return json; 
} else { 
return response['value']; 
} 
} 
 
 
Regards, 
Pavithra S. 


SS Sathyanarayanan Srinivasan September 30, 2019 01:05 AM UTC

Hi Pavithra,

Thanks for the input. I have adopted my code based on your inputs. I am pasting the data service code herewith.
                console.log('Check stateData:: grouping: ' + JSON.stringify(state.group)
                    + ', dataSource: ' + state.dataSource + ', action: ' + JSON.stringify(state.action));
                if (isNullOrUndefined(state.dataSource)) {
                    if (isNullOrUndefined(state.group) &&
                        (isNullOrUndefined(state.action) || !isNullOrUndefined(state.action['rows']))) {
                        let groupedResults = sliced;
                        state.group.forEach(grouping => { groupedResults = DataUtil.group(groupedResults, grouping); });
                        console.log('Returning filtered config : ' + JSON.stringify(groupedResults));
                        return { result: groupedResults, count: totalCount } as DataResult;
                    } else {
                        console.log('Returning filtered config : ' + JSON.stringify(sliced));
                        return { result: sliced, count: totalCount } as DataResult;
                    }
                } else {
                    console.log('Returning filtered config : ' + JSON.stringify(sliced));
                    return sliced;
                }

After this code change, the initial page load is triggering the data service with the state as below:
state: DataStateChangeEventArgs = { skip: 0, take: 15, group: ['s'] };

I can see the following assertions from JS Console logs, pertinent to the data service code above.
Check stateData:: grouping: ["s"], dataSource: undefined, action: undefined

With the code changes, I see the data is returned in natural format (array of complex objects for which the columns are setup and has been working). Now I observe an error event thrown from (actionFailure) with the only info as below.
{"error":{},"name":"actionFailure"}

Thus, the grid is still showing 'No records to display', even though the data is available (15 records, by pagingSettings).

Other than this, I am also observing some [Violation] messags in the JSConsole.... The are not coming out of our code (may be from within scaffolding of Browser or angular). Can you throw some light on the same too please.
[Violation] 'DOMContentLoaded' handler took 734ms
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
[Violation] 'setTimeout' handler took 74ms
[Violation] 'setTimeout' handler took 78ms
[Violation] Forced reflow while executing JavaScript took 64ms

Thanks and best regards,
Sathya

PS Pavithra Subramaniyam Syncfusion Team September 30, 2019 12:23 PM UTC

Hi Sathyanarayanan, 
 
Thanks for your update. 
 
We have created a sample for your reference. Please refer the below code example and sample for more information. 
 
public ngOnInit(): void { 
  this.pageOptions = { pageSize: 10, pageCount: 4 }; 
  let state = { skip: 0, take: 10, sorted: [{ 'name': 'CustomerID', direction: 'Ascending' }], group:['CustomerID'] }; 
  this.service.execute(state); 
} 
 
 
 
Note: Before perform grouping the records we need to sort the column based on the ascending order. 
 
If you still face the problem then share the sample or reproduce the reported problem with our sample that will helpful for us to validate further at our end. 
 
Regards, 
Pavithra S. 


SS Sathyanarayanan Srinivasan October 2, 2019 02:07 AM UTC

Hi Pavithra,

Thanks for your support. I really appreciate your patience and efforts. I finally have resolved the issues, so we can close this item. Seeing things work perfect is a gratifying feeling indeed.

However, I will note the following...
* Please notify me when the bug item for auto-close edit dialog is resolved.
* The code sample ou had shared use ej2-angular-grid v17.1.52, while m project use latest v17.2.52. Here I keep getting a compile error when I use state.action.rows. Ofcourse, in my tests I never encountered the scenario wher rows were present, so I just kept the code safe by using prototype notation (state.action['rows']). Just to avoid compile error, but can also potentialy handle the situation when rows actually present itself.

Best regards,
Sathya

MS Manivel Sellamuthu Syncfusion Team October 2, 2019 06:25 AM UTC

Hi Sathyanarayanan, 

We are happy to hear that your issues has been resolved. Please get back to us if you need further assistance. 

We will let you know once, the fix is included. 

Regards, 
Manivel 


Loader.
Up arrow icon