Reputation: 721
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
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
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