[Solved] HTML Select DropDown portion not updated

[Cole]

I have a page where I have a standard HTML Select element that is decorated using the RadFormDecorator.  I am dynamically updating the options in the list via javascript and making an asp.net ajax call to a webservice that has a call back that in turn clears out the select's options list and re-populates it.  The problem is that the options are being updated, but the portion of the drop down that is displayed and populated from the RadFormDecorator is not updated.  I have attached the dcode that shows how I am updating the control.  Any help in figuring out what I need to do to get the <ul> portion that is created by the radformdecorator would be much appreciated.

Thanks!

function populateSearchAttributesSuccess(result) {
    var drpSearchAttributeFixedList = document.getElementById('drp_SearchAttributeFixedList');
    var drpSearchAttributeAssociatedList = document.getElementById('drp_SearchAttributeAssociatedList');
    var drpSearchAttributeItemLookup = document.getElementById('drp_SearchAttributeItemLookup');
    var drpSearchAttributeBlackList = document.getElementById('drp_SearchAttributeBlackList');
    var drpSearchAttributeFilterAssociatedList = document.getElementById('drp_merchlist_search_attribute');

    var doFixed = false;
    var doAssociated = false;
    var doLookup = false;
    var doBlack = false;
    var doFilter = false;

    if (drpSearchAttributeFixedList != null) {
        doFixed = true;
        drpSearchAttributeFixedList.style.display = 'block';
        drpSearchAttributeFixedList.options.length = 0;
    }
    if (drpSearchAttributeAssociatedList != null) {
        doAssociated = true;
        drpSearchAttributeAssociatedList.style.display = 'block';
        drpSearchAttributeAssociatedList.options.length = 0;
    }
    if (drpSearchAttributeItemLookup != null) {
        doLookup = true;
        drpSearchAttributeItemLookup.style.display = 'block';
        drpSearchAttributeItemLookup.options.length = 0;
    }
    if (drpSearchAttributeBlackList != null) {
        doBlack = true;
        drpSearchAttributeBlackList.style.display = 'block';
        drpSearchAttributeBlackList.options.length = 0;
    }
    if (drpSearchAttributeFilterAssociatedList != null) {
        doFilter = true;
        drpSearchAttributeFilterAssociatedList.options.length = 0;
    }

    var xmlCatalogsArray = result.getElementsByTagName('Table1');

    var o;

    for (var i = 0; i < xmlCatalogsArray.length; i++) {
        if (xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild != null && xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild) {
            if (doFixed) {
                //Populate the fixed list
                o = document.createElement('option');
                o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data;
                o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;
                o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;

                if (isInternetExplorer())
                    drpSearchAttributeFixedList.appendChild(o);
                else
                    drpSearchAttributeFixedList.add(o, null);
            }

            if (doAssociated) {
                //Populate the associated list
                o = document.createElement('option');
                o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data;
                o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;
                o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;

                if (isInternetExplorer())
                    drpSearchAttributeAssociatedList.appendChild(o);
                else
                    drpSearchAttributeAssociatedList.add(o, null);
            }

            if (doLookup) {
                //Populate the Item Lookup field
                o = document.createElement('option');
                o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data;
                o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;
                o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;

                if (isInternetExplorer())
                    drpSearchAttributeItemLookup.appendChild(o);
                else
                    drpSearchAttributeItemLookup.add(o, null);
            }

            if (doBlack) {
                //Populate the Blacklist search attribute selector
                o = document.createElement('option');
                o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data;
                o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;
                o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;

                if (isInternetExplorer())
                    drpSearchAttributeBlackList.appendChild(o);
                else
                    drpSearchAttributeBlackList.add(o, null);
            }

            if (doFilter) {
                //populate the associated merchandising list filtering box
                o = document.createElement('option');
                o.value = xmlCatalogsArray[i].getElementsByTagName('ResonanceField').item(0).firstChild.data;
                o.text = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;
                o.label = xmlCatalogsArray[i].getElementsByTagName('CustomerField').item(0).firstChild.data;

                if (isInternetExplorer())
                    drpSearchAttributeFilterAssociatedList.appendChild(o);
                else
                    drpSearchAttributeFilterAssociatedList.add(o, null);
            }
        }
    }

[Niko]

Hello Jerome,

 There is a additional thing that should be done for decorated selects. You should call the FormDecorator's updateSelect client-side method. This method should be executed when the select element has been populated. Please, find attached a sample page demonstrating this.

Hope this helps.

All the best,
Niko
the Telerik team