[Solved] Styling autocomplete view

[christo]

Hi all.

I am using the trial version of NativeScript UI, downloaded yesterday, version 1.6.0.063.

I am unable to apply a style to the autocomplete view, I always get a white background in the SuggestionView and suggestionItems are spaced vertically (as shown in the attached image 1).

I used the code from the sample in the documentation downloaded with the component, i just applied a couple of classes or inline style to try to achieve the desired result (image 2).

<ACTextField:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}"
    tokenAdded="{{ onTokenAdded}}"
    suggestMode="SuggestAppend" displayMode="Plain" completionMode="StartsWith" class="searchTextField">
    <ACTextField:RadAutoCompleteTextView.suggestionView backgroundColor="magenta">
        <ACTextField:SuggestionView suggestionViewHeight="300" class="suggestion-view" backgroundColor="magenta">
            <ACTextField:SuggestionView.suggestionItemTemplate backgroundColor="magenta">
                <StackLayout orientation="vertical" padding="10" class="suggestion-element" backgroundColor="#07354c" margin="0">
                    <Label text="{{ text }}" margin="0" color="#ffffff"></Label>
                </StackLayout>
            </ACTextField:SuggestionView.suggestionItemTemplate>
        </ACTextField:SuggestionView>
    </ACTextField:RadAutoCompleteTextView.suggestionView>
</ACTextField:RadAutoCompleteTextView>

 

CSS class selectors doesn't work at all, for example I am trying this and only the first one on the main textfield works:

.suggestion-element {
    color: #f8e;
    background-color: #07354c;
    margin: 0;
}
.suggestion-element Label {
    color: #ffff00;
    background-color: #0000ff;
    margin: 0;
}
.suggestion-view {
    background-color: #07354c;
}

 

Any help appreciated, thank you very much,

Christo_

[christo]

Update.

Sorry, in the CSS code above the first rule was missing (the only that actually works), this:

.searchTextField {
    font-family: 'GT America';
    font-weight: 300;
    font-size: 18;
    color: #000000;
    background-color: #ffffff;
    padding: 15 20;
    border-radius: 2;
}

[christo]

Apparently I could achieve the result setting the height of the inner StackLayout equal to the SuggestionView suggestionViewHeight (300). Only inline, css classes of inner elements don't work.

[christo]

After setting the height of the StackLayout in suggestionItemTemplate I am still getting a very strange behaviour (random results with empty slots in between, see the attached animated gif).

[Nick Iliev]

Hello Christo,

After some research and test on our side, it appears that indeed the SuggestionView can not be styled for iOS (while it will be style successfully in Android by applying a global background color for the RadAutoCompleteTextView). I am glad that you have found a solution, although in your case setting the height of the internal stack layout as big as the whole suggestion view the user will have to scroll through the possible suggestions to see them all.(which might be undesired UX)

To prevent unwanted hidden suggestions, there is another workaround. What you can do is access the native control behind the suggestion view and change its natural background color.
e.g.:

your-page.xml

<ACTextField:RadAutoCompleteTextView loaded="onRadAutoLoaded" id="autocmp" items="{{ dataItems }}" tokenAdded="{{ onTokenAdded}}" suggestMode="SuggestAppend" displayMode="Plain" completionMode="StartsWith" class="searchTextField">

The only difference in the XML file is that I am using the loaded event to get a reference to the control (the same can be achieved with the and getViewById method).

your-page.ts

export function onRadAutoLoaded(args: AutoCompleteEventData) {
  var autocomplete = <RadAutoCompleteTextView>args.object;

  if (app.ios) {
    console.log(autocomplete.ios); // TKAutoCompleteTextView from http://docs.telerik.com/devtools/ios/api/Classes/TKAutoCompleteTextView.html

    var radIOS = autocomplete.ios;

    var wantedColor = new Color("#07354c");
    radIOS.suggestionView.backgroundColor = wantedColor.ios; // NOTE that we are using the iOS color

  }
}

Now the suggestionView will be set with the desired color and there is no need to set the same height for each suggestion (which would cause the suggestions to be hidden and always in need of scrolling).
Using this workflow you can also have direct access to any native elements

Meanwhile. I have logged this one as a bug here so that our developers can handle this one and provide out of the box implementation for styling the SuggestionView.

Regards,
Nikolay Iliev
Telerik by Progress

[christo]

Hi Nikolay,

thank you very much: your solution worked like a charm.

Sorry, can I bother you with another question about style and elements in autocomplete?

This is a location search and I would like – on focus – to prepend a default clickable “near me” item to results, like in the attached image. Do you think it is possible or can you address me to a way to approach it?
If not, I will find a different solution for that choice.

Thank you again,
C_

[Nick Iliev]

Hey Christo,

Glad to head the workaround was applicable for your case!

Regarding your new request - at this very moment, the feature you are looking for is not implemented for RadAutoCompleteTextView. Still, we have this ni mind as the original widgets that stand behind it has similar functionalities which can also be implemented in the nativeScript versions. I've logged this request here - you can track its development and also join the thread if you have ideas or further suggestions.

Regards,
Nikolay Iliev
Telerik by Progress