CasCading functionality using AutocompleteBox

[KANNAN]

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

[Hristo Valyavicharski]

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

 

 

[KANNAN]

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 

[KANNAN]

Hi Hristo

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

Thanks

Kannan

[Hristo Valyavicharski]

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

 

 

[KANNAN]

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