How to detect number of suggestions shown in suggestion view

Thread is closed for posting
5 posts, 0 answers
  1. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 11 Dec 2017 Link to this post

    Hi 

    Fo my nativescript angular app I wanted to detect the number of matching suggestions that are shown in the suggestion view so that I can trigger a specific action when no matching suggestions are found. I tried the following code which seems to work in IOS but not in android. Please advise on how I can get the number of matching suggestions on both IOS and android.

    Template

    <RadAutoCompleteTextView row="6" #autocmp [items]="dataItems" suggestMode="Suggest" completionMode="Contains" displayMode="Tokens" (itemLoading)="onTagSuggestionsLoading($event)" (suggestionViewBecameVisible)="onSuggestionViewBecameVisible($event)" layoutMode="Horizontal"<br>                (didAutoComplete)="onDidAutoComplete($event)" (tokenAdded)="onTokenAdded($event)" (tokenRemoved)="onTokenRemoved($event)">
        <SuggestionView tkAutoCompleteSuggestionView>
            <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="horizontal" padding="5">
                <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
         </SuggestionView>
    </RadAutoCompleteTextView>

     

    TS code

    onSuggestionViewBecameVisible(args) {
        self.numberOfMatchingTags = args._object.filteredItems.length;
        if (self.numberOfMatchingTags === 0) {
              self.addOwnTag();
        }
    }

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 12 Dec 2017 Link to this post

    Hello Anurag,

    The filteredItems property behind RadAutoCompleteTextView is private at this point (accessible only when no explicit casting to RadAutocCompleteTextView)
    This means that we are not officially released the property as functionality and the future implementation may change.
    All above considered the filteredItems property is an experimental feature not officially released but our development team is working on it.
    Currently, there is no viable option to access the length of the filtered item on Android.

    For your convenience, I have logged your issue as a feature request here, and you can track its development and possible workarounds in the linked issue.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 12 Dec 2017 in reply to Nikolay Iliev Link to this post

    Thanks for the clarification Nikolay. Is there any way at all that we can detect that the suggestions view is empty?
  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 12 Dec 2017 Link to this post

    Hi Anurag,

    One way to workaround this issue (getting the list of visible suggestions and/or detecting when there are not visible suggestions) is to directly handle the native 
    EditText control used in RadAutoCompleteTextView on Android. After accessing the native control, you can overwrite the native event listener using NativeScript marshaling (data conversion from Java to JavaScript) and implement your own logic to detect if the user input is part of some of the suggestions (startstWith or contains depending on the used suggestion mode).

    For example, let's assume that we are working with this example

    The first thing to do is to introduce callback fro the loaded event for our RadAutoCompleteTextView
    public onRadAutocompleteLoaded(args) {
        let rad = <RadAutoCompleteTextView>args.object;
        console.log(rad); // RadAutoCompleteTextView(222)
        console.log(rad.android); // com.telerik.widget.autocomplete.RadAutoCompleteTextView{265ae4f VFEDH.... .....A.D 13,64-1067,182 #4}
     
        let radAndroid = rad.android; // com.telerik.widget.autocomplete.RadAutoCompleteTextView{265ae4f VFEDH.... .....A.D 13,64-1067,182 #4}
        let nativeTextField = radAndroid.getTextField();
     
        let that = this; // we must "cache" this to reuse it in the Java implementation of tetChanfed
     
        nativeTextField.addTextChangedListener(new android.text.TextWatcher({
            afterTextChanged(s) {
                console.log("afterTextChanged");
                console.log(s);
     
                let counter = 0;
                that.countries.forEach(country => {
                    console.log(country.toLowerCase().startsWith(s)); // in this case using JS startsWith method
                    if (country.toLowerCase().startsWith(s)) {
                        counter++;
                    }
                });
                console.log("visible suggestions: " + counter); // visible suggestion starting with s
            },
            beforeTextChanged(s, start, count, after) {
                console.log("beforeTextChanged");
                console.log(s);
                console.log(start);
                console.log(count);
                console.log(after);
            },
            onTextChanged(s, start, before, count) {
                console.log("beforeTextChanged");
                console.log(s);
                console.log(start);
                console.log(before);
                console.log(count);
            }
        }))
    }

    And provide the callback in our HTML file as follows:
    <RadAutoCompleteTextView [items]="dataItems" (loaded)="onRadAutocompleteLoaded($event)" >

    With the solution above, we are directly overwriting the native event handler for Android. When the user inputs any characters, the afterTextChanged event will be triggered, and
    in this event, we will check our suggestions for matching queries (depending on the logic you can use startsWith, contains or other JavaScript methods)

    Keep in mind, that the above solution will work for Android (for iOS you can still use filteredItems) and our development team is considering providing this as out-of-the-box functionality. The feature request is logged here and I have upvoted the feature request via your ticket.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 12 Dec 2017 in reply to Nikolay Iliev Link to this post

    Thanks Nikolay. Appreciate the help.
Back to Top