CODEWITHSUNDEEP
javascriptangularjsautocompletekendo-ui
Haris
Haris

Reputation: 721

Kendo Angular's Auto complete showing object in results

I am trying to use kendo angular's auto complete widget using server filtering. After the service call the popup shows [object Object] and the number of these is equal to the results returned from the server. So could you please have a look at my code and point me to the mistake I am doing.

Here is my code:

var oThis = this;
var uiQueryConfig = this.seUIConfigsCacheService.GetItem('OpportunityDashboard');

var dataSource = new kendo.data.DataSource({
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
   read: function (options) {
           oThis.getDataFromServer(options, uiQueryConfig, false, options.data.filter.filters[0].value);
         }
   }
});

$scope.dataSource = dataSource;

Here is the definition of getDataFromServer:

getDataFromServer(options: any, uiConfig: Model.UIConfig, recordsCountNeeded: boolean, searchText?: string): void {

var searchParam = new Model.SearchParamsCM();
searchParam.PageIndex = options.data.page;
searchParam.PageSize = options.data.pageSize;
searchParam.SearchText = searchText;

var oThis = this;

this._seHttpService.GetWithParms('/spa/api/genericrequest', searchParam)
    .then(function (result) {
        var datum = oThis.createJSONFromResults(result.data, uiConfig);

        if (recordsCountNeeded) //grid
            options.success(datum);
        else //auto complete
            options.success(datum.data);
        },
        function (result) {
            options.error(result);
    });
 }

The code is in typescript.

This is in template:

<input id="name" kendo-auto-complete k-min-length="3" k-data-text-field="name" k-ignore-case="true" k-data-source="dataSource" ng-model="searchText" />

I tried to debug the options.success function and found out that the parameter value there has a lot of other information including the whole object returned from the server instead of the one I am passing it i.e. datum.data.

Thanks in anticipation!

EDIT: Ok I have sorted it out. actually there were two issues, first that the variable name in k-data-text-field should be in single quotes i.e. k-data-text-field="'name'". Second the variable name is case sensitive so it should have been k-data-text-field="'Name'"

Upvotes: 2

Views: 4697

Answers (2)

boyomarinov
boyomarinov

Reputation: 615

If you want to relieve your HTML from too much attributes, you could pass k-options attribute to your kendo element like this:

<input id="name" kendo-auto-complete k-options="acOptions" k-data-source="dataSource" ng-model="searchText" />

and then define the options on your scope like this:

$scope.acOptions = {
   minLength: 3,
   dataTextField: 'name'
   ignoreCase: true
}

Upvotes: 0

Haris
Haris

Reputation: 721

Ok I have sorted it out. actually there were two issues, first that the variable name in k-data-text-field should be in single quotes i.e. k-data-text-field="'name'". Second the variable name is case sensitive so it should have been k-data-text-field="'Name'"

Upvotes: 2

Related Questions