I having trouble getting allowCustomValue behavior to work correctly on the igcombo in 2016.2. There are 2 issues:
1. If the combo contains a value say ABCD and i want to add the custom value ABCD2 then it displays the message no matching records and clears off the combo. I can add WXYZ. So i need it to not match the data source.
2. The entered custom text doesnt work with ko binding. In the below example, I am expecting _selectedLot to get updated even when a custom text is entered but that doesnt work.
igCombo: {width: '100%', height: '25px', caseSensitive: false, compactData: false, dataSource: someArray , placeHolder: ' ', highlightMatchesMode: 'multi', hideEnterKey: false, selectionChanged: lotSelectionChangedEvent, selectedItems: _selectedLot,tabIndex:-1, selectedItemType : 'object', itemTemplate: '<div class=\'comboTemplate\'><div class=\'comboInfo\'><span class=\'emphasizedText\'>{{Lot}}</span></div></div>', textKey: 'Lot', valueKey: 'Lot', mode: 'editable', allowCustomValue: true}
Hi Deepti,
The issue has been replicated in our github repo and has been resolved already. You can find more information on it here:
https://github.com/IgniteUI/ignite-ui/issues/746
If you need anything else, please let me know.
Please let me know if u have an ETA for the case.
Hello Deepti,
After looking into that, the recommended approach is to handle the input event binding for KO for the igCombo. The selectionChanged event will not fire since the selection is not changing when typing a custom input. That was an oversight in my last response.
Using this method also negates my previous answer and you would need to use the following code in your ViewModel to get the value:
In your ViewModel:
function ViewModel() { ... this.lotSelectionChangedEvent = function(vm, evt) { this._customLot = $(evt.currentTarget).val(); }, ...}
In your markup:
<input id="koCombo" data-bind="igCombo{ width: '100%', height: '25px', caseSensitive: false, compactData: false, dataSource: colors, placeHolder: ' ', highlightMatchesMode: 'multi', hideEnterKey: false, selectedItems: _selectedLot, tabIndex: -1, selectedItemType: 'object', itemTemplate: '<div class=\'comboTemplate\'><div class=\'comboInfo\'><span class=\'emphasizedText\'>${Lot}</span></div></div>', textKey: 'Lot', valueKey: 'Lot', mode: 'editable', allowCustomValue: true}, event: { input: lotSelectionChangedEvent }" />
If you have any further questions with this, please let me know.
the selectionchanged event is not getting fired when a custom value is entered.
You can get the value from the input by using the igCombo's value method:
this._customLot = $("#avilablelotDS").igCombo("value");