Dynamically change datasource for kendo auto-complete

2 posts, 0 answers
  1. Dainis
    Dainis avatar
    1 posts
    Member since:
    Jun 2018

    Posted 06 Jun 2018 Link to this post

    <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)

  2. Joana
    Joana avatar
    196 posts

    Posted 07 Jun 2018 Link to this post

    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%;" />
      angular.module("KendoDemos", [ "kendo.directives" ])
                  $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

    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) {

    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:


    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top