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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





148221 Oct 10,2019 11:54 AM UTC Oct 28,2019 01:02 PM UTC Angular - EJ 2 9
Tags: MultiSelectDropdown
Asked On October 10, 2019 11:54 AM UTC

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 [Syncfusion]
Replied On October 11, 2019 10:01 AM UTC

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. 
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. 
Please be patience until then. 
Ashokkumar B. 

Replied On October 13, 2019 09:05 AM UTC


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.


Keerthana Rajendran [Syncfusion]
Replied On October 14, 2019 10:08 AM UTC

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

Replied On October 16, 2019 06:15 AM UTC

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"

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.


Attachment: Sample_Project_Change_event_in_Syncfusion_control2_a96390cc.zip

Sureshkumar P [Syncfusion]
Replied On October 17, 2019 09:46 AM UTC

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. 
Sureshkumar P 

Replied On October 18, 2019 07:13 AM UTC

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?


Sureshkumar P [Syncfusion]
Replied On October 21, 2019 09:29 AM UTC

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. 
Sureshkumar P 

Replied On October 27, 2019 11:34 AM UTC

Hi Team,

This workaround solved my problem.
Your assistance is highly appreciated.


Berly Christopher [Syncfusion]
Replied On October 28, 2019 01:02 PM UTC

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.  
Berly B.C 


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