CasCading functionality using AutocompleteBox

6 posts, 0 answers
  1. KANNAN
    KANNAN avatar
    4 posts
    Member since:
    Apr 2014

    Posted 17 Apr 2014 Link to this post

    Can anyone please post some examples how to implement cascading functionality using AutocompleteBox.


    I have a scenario where there are two Autocomplete dropdown listing Country and State values.

    When the user selects a particular country, the state AutocompleteBox should automatically refresh and list the State values based on the country selected.

    Thanks for the help.

    Kannan
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 22 Apr 2014 Link to this post

    Hi Kannan,

    Sample project is attached. The OnClientEntryAdded event of the first AutoCompleteBox is handled and in this event we are calling _requestItems() method of the second AutoCompleteBox as we pass all selected values from the first AutoCompleteBox. Once we have them on the server we populate the second AutoCompleteBox with the filtered data:

    <telerik:RadAutoCompleteBox ID="RadAutoCompleteBoxContinents" runat="server" OnClientEntryAdded="OnClientEntryAdded"></telerik:RadAutoCompleteBox>
       <telerik:RadAutoCompleteBox ID="RadAutoCompleteBoxCountries" runat="server" OnDataSourceSelect="RadAutoCompleteBoxCountries_DataSourceSelect"></telerik:RadAutoCompleteBox>
       <script type="text/javascript">
           function OnClientEntryAdded(sender, args) {
               var selectedContinentsIDs = '';
               var entries = $find('RadAutoCompleteBoxContinents').get_entries()._array;
               for (var i = 0; i < entries.length; i++) {
                   var value = entries[i].get_value();
                   selectedContinentsIDs += value + ';';
               }
               var ac = $find('RadAutoCompleteBoxCountries');
               console.log(selectedContinentsIDs);
               ac._requestItems(selectedContinentsIDs);
           }
       </script>

    protected void RadAutoCompleteBoxCountries_DataSourceSelect(object sender, AutoCompleteBoxDataSourceSelectEventArgs e)
    {
        RadAutoCompleteBox autoCompleteBox = (RadAutoCompleteBox)sender;
        autoCompleteBox.DataSource = GetCountries(e.FilterString);
    }

    I hope this helps.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KANNAN
    KANNAN avatar
    4 posts
    Member since:
    Apr 2014

    Posted 22 Apr 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo

    Thanks for the sample code.

    When i tried the provided sample, I am getting the following error after selecting a value in the Continents Autocompletebox.





    Thanks for your help.

    Kannan 
  5. KANNAN
    KANNAN avatar
    4 posts
    Member since:
    Apr 2014

    Posted 22 Apr 2014 in reply to KANNAN Link to this post

    Hi Hristo

    Attached the screen shot of the error that I mentioned in my earlier reply.

    Thanks

    Kannan
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 22 Apr 2014 Link to this post

    Hi Kannan,

    This is basic sample. To test it enter any of these continent "Asia", "Europe", "North America" in the first AutoCompleteBox. After you select an entry the second autocomplete will be populated with the countries for the selected continent. This demo is just to show you the approach you can use. The filtering might be working correctly.

    Cascading AutoCompleteBoxes is not very user friendly. Please test our Cascading ComboBoxes demo

    http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. KANNAN
    KANNAN avatar
    4 posts
    Member since:
    Apr 2014

    Posted 22 Apr 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo

    I am receiving the error after typing in a continent name like Asia in the First AutoCompleteBox.

    Also the Second AutoCompleteBox is not listing the filtered data based on the continent selected.

    We like  to use the AutocompleteBox, to display only the matching values based on user's input, not having all the values displayed in the dropdown.

    Thanks for your help.

    Kannan
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017