RadComboBox Dynamically load items

4 posts, 0 answers
  1. Kalki
    Kalki avatar
    2 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    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!

  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 01 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalki
    Kalki avatar
    2 posts
    Member since:
    Jul 2013

    Posted 01 Aug 2013 Link to this post

    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>
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 06 Aug 2013 Link to this post

    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.
Back to Top