I would like to submit a workaround I found which can be used for one of the documented limitations of igcombo as specified on https://www.igniteui.com/help/igcombo-known-limitations
The following one to be specific :
Initial selection won't be reflected if the item is currently not present in the page loaded by the combo.
My workaround does have some drawbacks, it triggers an extra roundtrip, but showing a page where the combo clearly should have a value where it is not filled in, simply is not a very good option for me, though I can understand the complexity of implementing such a thing.
What follows is the workaround:
<script type="text/javascript"> function comboDataBound(e, ui) { $("#DOMAIN_ID").igCombo({ dataBound: function (evt, ui) { ui.owner.index(0); $("#DOMAIN_ID").igCombo({ dataBound: null }); } }); ui.owner.filter("@Model.DOMAIN_NAME", null); }
$(document).ready(function () { $('#DOMAIN_ID').igCombo({ width: "280px", validatorOptions: { required: { errorMessage: 'The DOMAIN field is required.' }, lengthRange: { errorMessage: 'The field DOMAIN_ID must be a string with a maximum length of 9.', min: null, max: 9 }, messageTarget: 'DOMAIN_ID' }, loadOnDemandSettings: { enabled: true, pageSize: 20 }, filteringType: 'remote', filteringCondition: 'startsWith', responseDataType: 'json', responseDataKey: 'value', responseTotalRecCountKey: 'odata.count', textKey: 'NAME', valueKey: 'ID', footerTemplate: '<div class=\'boxed\'>Domain Count: {0} of {3}</div>', dataSource: '../../odata/Domain?$select=NAME,ID&$orderby=NAME', inputName: 'DOMAIN_ID', placeHolder: "Please, select a domain", noMatchFoundText:'Domain not found', dataBound: function (evt, ui) { return comboDataBound(evt,ui); } }); }); </script>
Note that I am not a javascript expert but the idea is to use the databound event, which is triggered when the first databinding is complete, with the default ajax call is done which retrieves only the very first items in the list, the list that does not contain the initial value. At that moment I install a different databinding eventhandler which in turn will set the event handler yet again, but to null, and initialises the selected index to 0, hence displaying my selected item in the editable text as I want.
I think this works well for a single select combo. Pity that I need this extra roundtrip, and that the code is jerky but all in all I hope an acceptable workaround worth sharing.
Is there something else that I should provide?
Philip the point of the demo was to create a working sample with runnable code. I didnt wanted to reproduce exactly your scenario, rather to gain a better understanding of the proposed workaround.
Going back to the runnable sample, what have I missed of your concept, as you can see I have a remote data source, which is fetching data on demand. How to configure the dataBound event?
http://jsfiddle.net/stuyckp/3bg2ukza/31/ contains the fiddle with my way of working
Note that I am using odata and that the filter operation is key!
I have created a new fiddle but there are a lot of differences with yours and mine.
Of course I am using a different datamodel but that should not be a big issue.
I am using odata, which makes the filtering happening via the smart odata filtering mechanism.
But the key is that there is an extra roundtrip needed which is happening by calling the filter the method which you commented out.
http://jsfiddle.net/stuyckp/3bg2ukza/31/
If this does not help, I can just create a small application that shows how to do it, with a fake database where I just store 10000 elements.
The functionality do make the combo retain its value when you go in edit after selecting it in say a table, is rather important. Or are there better ways, if the change where to happen inline, the problem would be the same right. Haven’t tried that yet.
Hello Philip,
I am trying to create a sample in order to clearly understand what is actually doing the proposed workaround. Could you please take a look and let me know what I am missing (update the sample).
http://jsfiddle.net/zdravko/3bg2ukza/1/
As you can see, I set 13th item to be selected (which is not part of the fetched data), altough with the code proposed by you, the selected item is always the first one (index 0)?