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

RadComboBox Dynamically load items

3 Answers 152 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Kalki
Top achievements
Rank 1
Kalki asked on 31 Jul 2013, 11:09 PM
Hello,

I am trying to dynamically delete and all the items in a combobox and then reload it with new items. Here is the code,

function addNewItems(selectRef, optionsArray, valuesArray) 
{                   
var combo = document.getElementById("ddlVehicleMake_Input");                   
combo.get_items().clear();                   
for (var idx = 0; idx < optionsArray.length; idx++) {         
              if (valuesArray == ""
{
                          var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                          comboItem.set_text(optionsArray[idx]);
                          combo.trackChanges();
                          combo.get_items().add(comboItem);
                      } else {                           var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                          comboItem.set_text(optionsArray[idx]);  
                         combo.trackChanges();
                          combo.get_items().add(comboItem);
                      }                   }                   
combo.commitChanges();               }

It fails at combo.get_items().clear(); throwing an error that method is not supported by the object. I think making the following reference should be enough.
Am I missing any references? OR how do I go about it?

Thanks!

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 01 Aug 2013, 11:19 AM
Hello Kalki,

As I can see, you are attempting to get a reference to the RadComboBox object using document.getElementById(). But using this approach, you are getting a reference to the DOM Element of the control and the usage of Combo's methods is not possible. I would suggest you to get a reference to the RadCombobox in the following manner : var combo = $find("<%= ddlVehicleMake.ClientID %>"); , like demonstrated in our documentation article.

 Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Kalki
Top achievements
Rank 1
answered on 01 Aug 2013, 04:58 PM
I did initially started with that, but as the element dropdown is in a user control page, it is throwing a runtime error.
So my follow up question would be. Does the script has to be under telerik:RadScriptBlock tags? Also do I add on the user control page or the aspx page where the user control is called?

Thanks!

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">           <script type="text/javascript">               function addNewItems(selectRef, optionsArray, valuesArray) {                   debugger;                   //var combo = $find("ctl00_cpMain_ctl01_appRadPaneltabVehicleInformation_i0_i0_tabVehicleInformation_ddlVehicleMake_Input");                   //var combo = getObject("ctl00$cpMain$ctl01$appRadPaneltabVehicleInformation$i0$i0$tabVehicleInformation$ddlVehicleModelSeries");                   //    var combo = selectRef;                   var combo = document.getElementById("ddlVehicleMake_Input");                   combo.get_items().clear();                   for (var idx = 0; idx < optionsArray.length; idx++) {                       if (valuesArray == "") {                           var comboItem = new Telerik.Web.UI.RadComboBoxItem();                           comboItem.set_text(optionsArray[idx]);                           combo.trackChanges();                           combo.get_items().add(comboItem);                       } else {                           var comboItem = new Telerik.Web.UI.RadComboBoxItem();                           comboItem.set_text(optionsArray[idx]);                           combo.trackChanges();                           combo.get_items().add(comboItem);                       }                   }                   combo.commitChanges();               }               function onChange_VehicleMakeVehical(sender, eventArgs) {                   //Populate Vehicle Make Model                   debugger;                   var objhdnMakeModelNameList = getObject("hdnMakeModelNameList");                   var objhdnMakeModelValueList = getObject("hdnMakeModelValueList");                   var objhdnModelNameList = getObject("hdnModelNameList");                   var objhdnModelValueList = getObject("hdnModelValueList");                   var vehicleMakeSelected = getObject("ctl00$cpMain$ctl01$appRadPaneltabVehicleInformation$i0$i0$tabVehicleInformation$ddlVehicleMake").value;                   var objddlVehicleModelSeries = getObject("ctl00$cpMain$ctl01$appRadPaneltabVehicleInformation$i0$i0$tabVehicleInformation$ddlVehicleModelSeries");                   //Get all Model for given Vehicle Make                   if (objhdnMakeModelNameList != null && objhdnMakeModelValueList != null && vehicleMakeSelected != null &&         objhdnModelNameList != null && objhdnModelValueList != null) {                       var makeModelNameList = objhdnMakeModelNameList.value.split(",");                       var makeModelValueList = objhdnMakeModelValueList.value.split(",");                       var modelNameList = objhdnModelNameList.value.split(",");                       var modelValueList = objhdnModelValueList.value.split(",");                       var selectedMakeModelNameList = new Array("Select");                       var selectedMakeModelValueList = new Array("");                       var selectedModelList = new Array("");                       //for each model get Key                       for (var idx = 0; idx < makeModelValueList.length; idx++) {                           if (makeModelValueList[idx] == vehicleMakeSelected) {                               selectedModelList.push(makeModelNameList[idx]);                           }                       }                       //for each model get Key Value pair                       for (var idx1 = 1; idx1 < selectedModelList.length; idx1++) {                           for (var i = 0; i < modelValueList.length; i++) {                               if (selectedModelList[idx1] == modelValueList[i]) {                                   selectedMakeModelNameList.push(modelNameList[i]);                                   selectedMakeModelValueList.push(modelValueList[i]);                                   break;                               }                           }                       }                       //Populate the drop down for Vehicle Models                       addNewItems(objddlVehicleModelSeries, selectedMakeModelNameList, selectedMakeModelValueList);                   }               }           </script>               </telerik:RadScriptBlock>
0
Nencho
Telerik team
answered on 06 Aug 2013, 08:30 AM
Hello Kalki,

The RadScriptBlock is used where you have JavaScript that evaluates after an AJAX request, for example when the content of RadAjaxPanel is updated asynchronously. Here you could find detailed information on the matter. In addition, I would suggest you to add the script in the user control, in order to correctly get a reference to the RadComboBox using the previously suggested approach.

Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ComboBox
Asked by
Kalki
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Kalki
Top achievements
Rank 1
Share this question
or