Kendo angularjs autocomplete with remote datasource

[Paolo]

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?

 

[Patrick | Technical Support Engineer, Senior]

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

 

 

[Paolo]

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

[Paolo]

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

[Patrick | Technical Support Engineer, Senior]

Hello Paolo,

Glad everything is working!

Regards,
Patrick
Telerik

 

 

[Andre]

How do you do the same in typescript?

[Stefan]

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

[TkfnEng]

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

 

 

[/quote]

[Stefan]

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