Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
igcombo with load on demand initializing the value
posted

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. 

Parents Reply Children
No Data