New to Kendo UI for jQuery? Download free 30-day trial

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{
             data: [
                   "Bosnia & Herzegovina",
                   "Czech Republic",

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

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

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

See Also

In this article
Not finding the help you need? Improve this article