The change event is not getting triggered in case syncfusion ejs-multiselect control is used in Ag-Grid custom cell editor

[Tuariq]

I am using syncfusion ejs-multiselect control as a custom cell editor in Ag-grid. In this the change event is not getting fired when multi-select value is changed and some other cell is clicked. How ever if clicked out of Ag-grid, change event is getting fired. (i am using in my existing project) As in case of creating a new project and trying same, it is working fine. Following are package.json file dependencies (in case it is of any version issue):

        "@agm/core": "^1.0.0-beta.5",
        "@angular-devkit/core": "0.0.29",
        "@angular-devkit/schematics": "^7.1.1",
        "@angular/animations": "~7.2.0",
        "@angular/cdk": "^7.1.1",
        "@angular/common": "~7.2.0",
        "@angular/compiler": "~7.2.0",
        "@angular/core": "~7.2.0",
        "@angular/forms": "~7.2.0",
        "@angular/http": "^6.0.3",
        "@angular/material": "^6.2.1",
        "@angular/platform-browser": "~7.2.0",
        "@angular/platform-browser-dynamic": "~7.2.0",
        "@angular/router": "~7.2.0",
        "@markpieszak/ng-application-insights": "^7.0.3",
        "@syncfusion/ej2-angular-calendars": "^17.2.49",
        "@syncfusion/ej2-angular-dropdowns": "^17.3.14",
        "@syncfusion/ej2-angular-inputs": "^17.2.52",
        "@syncfusion/ej2-angular-richtexteditor": "^17.1.43",
        "ag-grid-angular": "^21.2.2",
        "ag-grid-community": "^21.2.2",
        "ag-grid-enterprise": "^21.2.2",
        "angular2-uuid": "^1.1.1",
        "applicationinsights-js": "^1.0.19",
        "bootstrap": "^3.3.7",
        "core-js": "^2.5.4",
        "indexeddb-angular": "^0.1.8",
        "jquery": "^3.3.1",
        "lodash": "^4.17.10",
        "ng2-slim-loading-bar": "^4.0.0",
        "ngx-breadcrumbs": "0.0.3",
        "ngx-cookie-service": "^1.0.10",
        "ngx-drag-drop": "^2.0.0",
        "ngx-monaco-editor": "^6.0.0",
        "rxjs": "~6.3.3",
        "rxjs-compat": "^6.2.2",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"

[Ashokkumar Balasubramanian]

Hi Tuariq, 

 

Good day to you. 

 

We would like to let us know that in the multiselect component change event will trigger when the control has lost focus. Since we have a different mode in MultiSelect such as default, box, delimiter, and checkbox. Based on the behavior, a popup will not be closed after selecting a value in checkbox mode and we have closed the popup when the control loses the focus and will trigger the change event in control focus out. From the old version to the latest version this behavior exists. So, we suggest using the select event if you need event when selecting the value. 

 

https://stackblitz.com/edit/angular-oafiyd?file=app.component.html 

 

Else, if you need the change event for when selecting the value, we have already considered it as a bug at our end and it will be included on upcoming weekly patch releases, which is expected to be rolled out on end of October, 2019. You can track the status of this problem by using below feedback portal. 

 

https://www.syncfusion.com/feedback/9084/need-to-provide-change-event-while-selecting-the-value-in-multiselect-as-api 

 

Please be patience until then. 

 

Regards, 

Ashokkumar B. 

[Tuariq]

Hi,

Thanks for the reply. I did understand that.

But the point is I need change event only when focus is lost i.e in case of AG-grid when some other cell is clicked. This is behavior of multi-select.

This is working fine in case I am creating a different project but not working in a specific project. I need help why change event is not getting fired in the specific project. I have shared all version details in question. Please do let me know if you need any other details to provide help.

Thanks

Tuariq

[Keerthana Rajendran]

  

Hi Tuariq,  

  

Good day to you.  

In our end change event will be triggered when control has lost its focus. Could you please provide more details on the following which will help us to check and provide a better solution at earliest. 

  

1. Specific project Code snippet
2. Share the specific project or issue reproducing sample
3.  Specific project Syncfusion package version
4.  If possible, replicate the issue in our previous sample

Regards, 

Keerthana. 

[Tuariq]

Hi Team,

I have attached the specific project in attachment file. This can be run in Visual Studio Code. Please use npm install command to install dependencies before running it.

Syncfusion multiselect version: 17.3.14

The description is as follows:

The app.component.ts file contain ag-grid with three columns. The first column by name "Make" has a custom cell editor created by name "MulticomponentComponent".

This cell editor has syncfusion multi-select control in it, which has a change event. (See code in folder "multicomponent"

Issue:

When we select some value/values in this and click on some other cell or tab to next cell, our change event do not get fired. ("change occur" has been logged in console).

However if after selecting values, user clicks somewhere outside ag-grid, the change event gets fired.

Thanks

Tuariq

Attachment: Sample_Project_Change_event_in_Syncfusion_control2_a96390cc.zip

[Sureshkumar P]

Hi Tuariq, 

 

We have checked the shared sample project. The cause of the issue is multiselect control destroyed when you click other grid cell because Ag-Grid destroyed the control. So, at that time none of the events will trigger other than destroy event. So, if you need to perform any operation while clicking on the other grid cell then you can use the destroy event.  

 

<ejs-multiselect id='multiselectelement' [dataSource]='sportsData' [fields]='fields' [(value)]="value" 

[placeholder]='placeholder' (select)="select($event)" (destroyed)="onDestroyed($event)" (change)="OnChange($event)"></ejs-multiselect> 

 

 

Also, when you click the outside of ag-grid, the control not destroyed. So, at that time change events will trigger. So, you can use change event instead of destroy event while clicking outside the ag-grid element. 

 

Regards, 

Sureshkumar P 

[Tuariq]

Hi Team,

The problem still exists why multi-select control is being destroyed before the change event is called? The information needed in change event cannot be fulfilled by destroy event.

Other controls' change event do get fired in similar condition. Even in case of syncfusion DateTime Picker.

Can you please help me with this?

Thanks

Tuariq

[Sureshkumar P]

Hi Tuariq, 

 

We have checked the reported requirement. We would like to inform you that, In DateTimePicker change event will be triggered while selecting the value. But in a multi-select component change events will be triggered when the control lost the focus. At that time when click another cell, control destroyed when placing a component inside ag-grid. DateTimePicker component also destroys when you click another cell. 

 

Also, we have changeOnBlur property. If you disable the changeOnBlur to false, then the change event will be triggered while selecting the value. We suggest using the property to get rid of the reported issue. 

 

We have provided the support in the latest version "@syncfusion/ej2-angular-dropdowns": "17.3.17". Please upgrade the package to use this property. 

 

Regards, 

Sureshkumar P 

[Tuariq]

Hi Team,

This workaround solved my problem.

Your assistance is highly appreciated.

Thanks

Tuariq

[Berly Christopher]

Hi Tuariq, 

 

We are glad to hear that issue is resolved at your end. Please revert us if you need further assistance on this. We will be happy to assist you.  

 

Regards, 

Berly B.C