Kendo angularjs autocomplete with remote datasource

7 posts, 0 answers
  1. Paolo
    Paolo avatar
    28 posts
    Member since:
    Nov 2015

    Posted 04 Mar 2016 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
    203 posts

    Posted 04 Mar 2016 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. Paolo
    Paolo avatar
    28 posts
    Member since:
    Nov 2015

    Posted 04 Mar 2016 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

  4. Paolo
    Paolo avatar
    28 posts
    Member since:
    Nov 2015

    Posted 05 Mar 2016 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

  5. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 07 Mar 2016 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!
     
  6. Andre
    Andre avatar
    3 posts
    Member since:
    Nov 2016

    Posted 08 Dec 2016 in reply to Patrick Link to this post

    How do you do the same in typescript?
  7. Stefan
    Admin
    Stefan avatar
    682 posts

    Posted 12 Dec 2016 Link to this post

    Hello Andre,

    I can suggest checking the information in our documentation how to use the Kendo UI widgets with TypeScript:

    http://docs.telerik.com/kendo-ui/third-party/typescript#installation

    In general, we do not have TypeScript equivalent of our demos as the approach is similar in TypeScript.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top