Suggestion View Customization

SuggestionView Template

RadAutoCompleteView provides the option to change the default template that visualize the filtered items and implement a custom template using SuggestionViewTemplate property.

• SuggestionViewTemplate (DataTemplate): Defines the template used to visualize the filtered items

Example

Here is an example how to use the RadAutoCompleteView SuggestionViewTemplate:

First, create the needed business objects, for example type Person with the following properties:

• C#

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Then create a ViewModel with a collection of Person objects:

• C#

public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<Person>
        {
            new Person{FirstName = "Alex", LastName = "Ramos"},
            new Person{FirstName = "Ben", LastName = "Johnas"},
            new Person{FirstName = "Carlos", LastName = "Romero"},
            new Person{FirstName = "Anna", LastName = "Kurtis"},
            new Person{FirstName = "Eva", LastName = "Johnson"},
            new Person{FirstName = "Terry", LastName = "Willson"},
            new Person{FirstName = "John", LastName = "Doe"},
            new Person{FirstName = "Teressa", LastName = "Bryan"},
            new Person{FirstName = "Nick", LastName = "Norris"},
            new Person{FirstName = "Eric", LastName = "Wheeler"},
            new Person{FirstName = "William", LastName = "Montero"},
            new Person{FirstName = "Sam", LastName = "Browm"},
            new Person{FirstName = "Ivan", LastName = "Petrov"},
            new Person{FirstName = "Martin", LastName = "Romero"},
            new Person{FirstName = "Eva", LastName = "Gonzales"},
            new Person{FirstName = "An", LastName = "Watson"},
            new Person{FirstName = "David", LastName = "Alvarez"},
            new Person{FirstName = "Danny", LastName = "Johnes"},
            new Person{FirstName = "Pawel", LastName = "Ivanon"},
            new Person{FirstName = "Henrry", LastName = "Carty"},
            new Person{FirstName = "Nick", LastName = "Morales"},
            new Person{FirstName = "Eric", LastName = "Samaniego"},
            new Person{FirstName = "William", LastName = "Curtis"},
            new Person{FirstName = "James", LastName = "Santos"}
        };
    }

    public ObservableCollection<Person> Items { get; set; }
}

Finally, let's use the following snippet to declare a RadAutoCompleteView and its SuggestionViewTemplate with RadDataGrid in XAML:

• XAML

<telerikInput:RadAutoCompleteView x:Name="autoCompleteView"
                                  ItemsSource="{Binding Items}"
                                  TextSearchPath="FirstName"
                                  DisplayMode="Tokens"
                                  VerticalOptions="Start"
                                  CompletionMode="Contains"
                                  Watermark="Search here..."
                                  SuggestionViewHeight="150">
    <telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
        <DataTemplate>
            <telerikDataGrid:RadDataGrid x:Name="dataGrid"
                                         ItemsSource="{Binding FilteredItems, Source={x:Reference autoCompleteView}}" 
                                         AutoGenerateColumns="False" 
                                         GridLinesVisibility="Vertical"
                                         BackgroundColor="LightGray"
                                         SelectionChanged="DataGrid_SelectionChanged">
                <telerikDataGrid:RadDataGrid.Columns>
                    <telerikDataGrid:DataGridTextColumn HeaderText="First Name"
                                                        PropertyName="FirstName"
                                                        CanUserSort="False"
                                                        CanUserGroup="False"
                                                        CanUserFilter="False"
                                                        HeaderStyle="{StaticResource CustomDataGridColumnHeaderStyle}"
                                                        CellContentStyle="{StaticResource CustomCellContentStyle}"/>
                    <telerikDataGrid:DataGridTextColumn HeaderText="Last Name"
                                                        PropertyName="LastName"
                                                        CanUserSort="False"
                                                        CanUserGroup="False"
                                                        CanUserFilter="False"
                                                        HeaderStyle="{StaticResource CustomDataGridColumnHeaderStyle}" 
                                                        CellContentStyle="{StaticResource CustomCellContentStyle}"/>
                </telerikDataGrid:RadDataGrid.Columns>
            </telerikDataGrid:RadDataGrid>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
</telerikInput:RadAutoCompleteView>

Where you will need to add the following namespaces:

• XAML

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

Here is the result:

A sample SuggestionView Template example can be found in the AutoCompleteView/Templates folder of the SDK Samples Browser application.