This is a migrated thread and some comments may be shown as answers.

Kendo angularjs autocomplete with remote datasource

8 Answers 553 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Paolo
Top achievements
Rank 1
Paolo asked on 04 Mar 2016, 03:17 PM

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?

 

8 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 04 Mar 2016, 07:39 PM
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!
 
0
Paolo
Top achievements
Rank 1
answered on 04 Mar 2016, 09:15 PM

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

0
Paolo
Top achievements
Rank 1
answered on 05 Mar 2016, 02:20 PM

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

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 07 Mar 2016, 03:33 PM
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!
 
0
Andre
Top achievements
Rank 1
answered on 08 Dec 2016, 12:22 PM
How do you do the same in typescript?
0
Stefan
Telerik team
answered on 12 Dec 2016, 12:18 PM
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.
0
TkfnEng
Top achievements
Rank 1
answered on 06 Jul 2017, 07:32 AM

Hi,

I am using such as in the following example to the AutoComplete (with angular). But there is a previously selected data in my record. So I wanna do select this data in AutoComplete and server-side filtering. Cause I have approximately 3 million data (Country/City).

This is really important for me. We bought to make our jobs easier in company. There must be a way to do that.

Please any ideas?

 

 

[quote]Patrick said: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!
 
[/quote]
0
Stefan
Telerik team
answered on 10 Jul 2017, 05:44 AM
Hello Tekfen,

In general, in order to deselect(clear) the data in the dataSource I can suggest using its data method and passing an empty array to it:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

If the scenario is more specific, please provide detailed steps in which the data should be deselected, and we will gladly assist.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
AutoComplete
Asked by
Paolo
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Paolo
Top achievements
Rank 1
Andre
Top achievements
Rank 1
Stefan
Telerik team
TkfnEng
Top achievements
Rank 1
Share this question
or