MultiSelect Dropdown inside igx-grid

Hi Team,

I’m trying to use igx-combo with multi-select option inside igx-grid. when you select any option it does not reflect selected option immediately it takes some time or you have to click elsewhere in the grid to get the option selected in the dropdown. hoping for a example of igx-grid with igx-combo inside it for better clarity.

Thank you!!

Hello Bala,

Thank you for contacting Infragistics Community!

I created a small sample trying to reproduce the described behavior on my side. In my application, I am listening for the onSelectionChange event of the igxCombo and when it occurs, I update the cell with the new selection of the combo. As you can observe this happens immediately and there aren`t any delays.

Please test my sample on your side and if it is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.

Looking forward to hearing from you.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Thanks for your help, I replaced igxCellEditor directive with igxCell with that delay went off.

Hey Martin, now I’m using same setting as you are using for igx-combo but now the problem is when I’m updating dropdown changeSelection is triggering infinitely. i’m attaching screenshot of setting that i’m using

Hello Bala,

Thank you for getting back to me!

Please note that because of the igxGrid virtualization when scrolling the igxGrid the row’s data gets updated. Within the sample I have prepared for you the igxComboComponent is bind to the value of the cell ([ngMode]=”cell.value”) and every time the user scrolls the igxGrid the cell would be updated and respectively the igxComboComponent onSelectionChange event would be triggered. Having this in mind subscribing to this event cause the executing of the selectionChange method not only when the user changes the selection of the igxCombo but when the user scrolls the grid as well.

In case you don’t want to execute the selectionChange method that often I suggest subscribing to the onSelectionChange of the igxComboComponent within the onOpening event and unsubscribing to it respectively within the onClosing event, as I have demonstrated in the following sample. Please note that in that case the onSelectionChange event would be still fired when the user scrolls the grid but you won’t listen for it in that scenario.

I still recommend using the igxCombo within an igxCellEditor template as it is demonstrated in the editing sample in our official documentation. As you can observe if you start editing the “Available at” column the igxGrid gets immediately in editMode and there isn’t any delay when updating the values.

Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.  

Hello Martin, 

We were using igxCombo within an IgxCellEditor using the same setting as showed in the official documentation. when you are new to the page and use any dropdown present in the grid it works fine but after you try to work with other dropdown in the grid the problem starts to come. problem is that when you select any option it does not reflect immediately, it comes when you scroll over dropdown list or close the dropdown.

Thanks,

Bala Murugan

Hello Bala,

Thank you for getting back to me!

Please note that when the igxCombo is placed within igxCellEditor template it should be bound to the cell’s editValue instead of the cell’s value. I believe you will find the Editing Events section of our official igxGrid’s Cell Editing topic very helpful. As you can observe the cell’s editValue is commited after the cellEditDone event is fired. Having this in mind it is expected that the cell’s value won’t be modified until the cellEditDone is fired for the cell containing the igxCombo. For example, if you change the igxCombo selection, close the igxCombo and clicks Esc the cellEditCancel event will be triggered and the cell’s value won’t be modified, meaning that in case displaying/hiding/modifying any other components depend on the cell’s value you have to submit the changes in order to expect the desired actions to occur. If this is the case I suggest using one of the approaches I have demonstrated above.

If you want to use the igxCombo within igxCellEditor template and your scenario is different than the above described I would kindly ask you to try replicating the issue you’re facing either in the sample I have provided or via providing me a small demo project. Having such sample will be highly appreciated and extremely helpful for providing you with solution as soon as possible.

Looking forward for your reply!

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Hi Martin

I am using version igniteui-angular@9.1.27. you can look into the behaviour of dropdown in this sample 

Hello Bala,

Thank you for getting back to me!

Please note that the issue you’re facing is related to an issue in IgniteUI for Angular which has been already fixed within IgniteUI for Angular 10.2.6 and 11.0.4. You can refer to the following samples: 10.2.6 and 11.0.4.

Please keep in mind that according to our support policy support is applicable to two versions back – latest stable, and the previous major version. In order to take advantage of all new features and functionalities would I suggest updating to Ignite UI for Angular 11.0.x, which currently is the latest avaliable. For more information, you can refer to our official Update guide.

Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.