Kendo angularjs autocomplete with remote datasource

5 posts, 0 answers
  1. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 04 Mar Link to this post

    Hello,

    I am trying to setup an autocomplete with angular and kendo, using remote datasource.

    I have an input field :

    <input type="text" kendo-auto-complete  k-data-source="customersDataSource"  k-data-text-field="'name'" k-data-value-field="'id'"/>

    And a controller with a scope:

    $scope.customers=['adolfo','paolo'];
     
        $scope.customersDataSource={
         
              serverFiltering: true,
              transport: {
                  read: {
                      url: "/Customers",
                      type:'jsonp'
                  }
              }
          };

    If i set $scope.customers in the k-data-source , then autocomplete works, but using $scope.customersDataSource autocomplete does not work.

    In firebug it seems there is no call for data.

     

    Any suggestions?

     

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 04 Mar Link to this post

    Hello Paolo,

    Please take a look at this Telerik Dojo illustrating a Kendo AutoComplete with a remote datasource using AngularJS.

    I believe the main issue may be how you configure the dataType.  Here's how I set it:
    $scope.customersDataSource = {         
              transport: {
                serverFiltering: true,
                read: {
                  dataType: "jsonp",  //instead of "type: 'jsonp',"
                  url: "http://demos.telerik.com/kendo-ui/service/Customers"
                }
              }
            };

    Hope this helps.

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 04 Mar Link to this post

    Hello Patrick,

    thanks for your reply

    I have already came up to this dojo but got some issues, using telerik services.

    i. All the records are loaded and are not reloaded in base of what you type.

    ii. Record list is laded outside the combobox.

    I attach an image so you can visualize it.

    Thanks

     

    Paolo

  5. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 05 Mar Link to this post

    Update:

    I solved the issue: serverFiltering must be inside transport and not outside:

    $scope.customersDataSource={
          transport: {
            serverFiltering: true,
            read: {
              dataType:"jsonp",
               
             url: "http://localhost:3000/api/Customers?access_token=5zfC0qRxHMpeFJ"
             
            }
          }
        };

     

    I have to check the layout problem but autocomplete now works.

    Paolo

  6. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 07 Mar Link to this post

    Hello Paolo,

    Glad everything is working!

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready