This is a migrated thread and some comments may be shown as answers.

HTML Select DropDown portion not updated

1 Answer 69 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Cole
Top achievements
Rank 1
Cole asked on 04 Jun 2012, 11:49 PM
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);
            }
        }
    }

1 Answer, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 06 Jun 2012, 10:08 AM
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
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
FormDecorator
Asked by
Cole
Top achievements
Rank 1
Answers by
Niko
Telerik team
Share this question
or