kendo ui autocomplete - set data on load

[Neelima]

I have a textbox for which I added kendoAutoComplete function. This is working fine. However, I wanted to set some value to this textbox upon the page load (I get the value from DB). With KendoAutoComplete, I am unable to set this.
I can either implement KendoAutoComplete or set datsource. Both of them work fine separately. Where as, if I include the code related to both - it doesnt work. Below is the code. Can you please throw me some inputs if you have come across this issue?

 

myController.js

$("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                serverFiltering: true,
                enforceMinLength: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'inventoryLocation/getParts',
                        type: "get",
                        dataType: "json",
                        data: function () {
                            return { partNumber: $scope.autoCompleteText }
                        }
                    }
                },
            },
            change: function(e) {
                $scope.autoCompleteText = this.value();
            },
            filter: "startswith",
            //placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

cshtml:

<input id="txtPartNumbers" type="text" ng-model="filterByPartNumbers" class="form-control filterTextArea" style="width: 300px;height:80px;" placeholder="Enter Part Numbers (Comma sepatared)" />

I am setting "filterByPartNumbers" value in my controller

....

var data = getDataFromDB();

$scope.filterByPartNumbers = data.partNumbers;

...

Appreciate you help.

 

Thank you!!

 

 

 

[Neelima]

I was able to set the value as below:

    $("#txtPartNumbers").data("kendoAutoComplete").value(data.partNumbers);

You can mark this as closed now.

Thanks!

[Neelima]

Sorry to come back to this. I used jQuery above to access the control in my controller.

Can this be done in angular please?

something like..

Instead of $("#txtPartNumbers").kendoAutoComplete({....

$scope.filterByPartNumbers = {...

I need to avoid jQuery and access the control directly in Angularjs. 

 

Appreciate your help.

 

Thanks!

[Ivan Danchev]

Hi Neelima,

If you declare the AutoComplete like this:

<input kendo-auto-complete="txtPartNumbers"

You would be able to get a reference to it and call its value method as shown below:

$scope.txtPartNumbers.value();

Dojo example.

Regards,
Ivan Danchev
Progress Telerik

[Neelima]

Many thanks Ivan!!

 

Appreciate your help on this.

 

Regards

Neelima