kendo ui autocomplete - set data on load

5 posts, 0 answers
  1. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 10 Nov Link to this post

    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!!

     

     

     

  2. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 13 Nov Link to this post

    I was able to set the value as below:

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

    You can mark this as closed now.

    Thanks!

  3. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 29 Nov Link to this post

    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!

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 01 Dec Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Neelima
    Neelima avatar
    18 posts
    Member since:
    Oct 2017

    Posted 01 Dec in reply to Ivan Danchev Link to this post

    Many thanks Ivan!!

     

    Appreciate your help on this.

     

    Regards

    Neelima

Back to Top