Dynamically change datasource for kendo auto-complete

[Dainis]

<input kendo-auto-complete ng-model="filter.FilterValue" k-data-source="filteredData(data)" style="width: 100%;" />

 

is it possible to dynamically change the data source currently , I get errors when trying. Any ideas why. ( I am quite new to angularJs and kendo)

[Joana]

Hello Dainis,

My colleague Dimitar has already answered to the same thread opened by you. To facilitate the communication I suggest that we keep the discussion in one thread. For you convenience, I am pasting the reply below:

You could bind the AutoComplete widget to remote data and pass a custom parameter with the read request to the server through the dataSource's transport.read.data() method:

Copy Code

<input kendo-auto-complete ng-model="country" k-data-text-field="'ProductName'" k-data-source="productsDataSource"style="width: 100%;" />

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
              $scope.country = "";

              $scope.productsDataSource = {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read:  {
                    url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    dataType: "json",
                    data: function() {
                      return {
                        myParam: 12
                      }
                    }
                  },
                }
              };
          })
</script>

In this way, the "myParam" value will always be passed to the remote service when the AutoComplete widget is bound to its remote source. The value can be used to filter the data as needed on the server and return a collection of values based on the "myParam" value.With the above in mind, if you need to change the dataSource of the AutoComplete based on the user action (e.g changing a field in a form or selecting a value in other widget/part of the page), then simply call the dataSource.read() method in the respective event handler, which will trigger the read request to the remote server and bind the widget to the new data:

Copy Code

$scope.onClick = function(ev) {
  $scope.myAutoComplete.dataSource.read();
}

I hope this helps. In case you have any additional questions, please do not hesitate to contact us.

In addition, you might check our setDataSource method that could be used for changing the dataSource. It automatically will fetch the data and bind it to the AutoComplete widget:

https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/methods/setdatasource 

Regards,
Joana
Progress Telerik