HTML Select DropDown portion not updated

2 posts, 0 answers
  1. Cole
    Cole avatar
    2 posts
    Member since:
    Mar 2012

    Posted 04 Jun 2012 Link to this post

    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);
                }
            }
        }
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 06 Jun 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top