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
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
5 Answers, 1 is accepted
0
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:
I hope this helps.
Regards,
Hristo Valyavicharski
Telerik
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.
0

KANNAN
Top achievements
Rank 1
answered on 22 Apr 2014, 03:57 PM
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
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
0

KANNAN
Top achievements
Rank 1
answered on 22 Apr 2014, 03:58 PM
Hi Hristo
Attached the screen shot of the error that I mentioned in my earlier reply.
Thanks
Kannan
Attached the screen shot of the error that I mentioned in my earlier reply.
Thanks
Kannan
0
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
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.
0

KANNAN
Top achievements
Rank 1
answered on 22 Apr 2014, 05:26 PM
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
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