Edit this page

Change DataSource Dynamically

The following example demonstrates how to dynamically change the DataSource based on user selections in the AutoComplete that are made through radio buttons.

    <div id="example">
    <div class="demo-section k-content">
       <h4>Choose shipping countries:</h4>
       <button id="change">Change DataSource</button>
       <input id="countries" style="width: 100%;" />
       <div class="demo-hint">Start typing the name of an European country</div>

       $(document).ready(function () {
           var ds1 = new kendo.data.DataSource({
             data: [
                   "Bosnia & Herzegovina",
                   "Czech Republic",

           var ds2 = new kendo.data.DataSource({
             data: [
                   "San Marino",
                   "United Kingdom",
                   "Vatican City"

           //create AutoComplete UI component
           var countries = $("#countries").kendoAutoComplete({
               dataSource: ds1,
               filter: "startswith",
               placeholder: "Select country...",
               separator: ", "

           $("#change").click(function() {

See Also

For more runnable examples on the Kendo UI AutoComplete, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article