This is a migrated thread and some comments may be shown as answers.

SuggestionItemTemplate cell height request

1 Answer 153 Views
AutoCompleteView
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 05 Mar 2020, 12:17 PM

Hello,

 

I am using AutoCompleteView and i want to change height of cell. I have min two line of label but its not fitting.(second line being invisible)

How can i arrange height of SuggestionItemTemplate cell And change width of cell seperator line?

 

Thank you.

 

<telerikInput:RadAutoCompleteView.SuggestionItemTemplate>

<DataTemplate>

<ViewCell>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Label Margin="5"FontSize="24"Text="{Binding Name}"TextColor="Black"/>

<Image Grid.Column="1"Margin="5"HeightRequest="20"Source="{Binding ImageSource}"WidthRequest="20"/>

</Grid></ViewCell></DataTemplate>

</telerikInput:RadAutoCompleteView.SuggestionItemTemplate>

 

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 09 Mar 2020, 10:29 AM

Hi Gokhan,

Let me get straight to the questions:

1) Change Cell Height:

This scenario could be achieved using the AutoCompleteView.SuggestionViewTemplate and visualize the filtered items inside a Xamarin.Forms ListView control. In order to automatically size the row height you can set the ListView.HasUnevenRows property top True:

<telerikInput:RadAutoCompleteView x:Name="AutoComplete"
                                ItemsSource="{Binding Source}"
                                TextSearchPath="Name"
                                VerticalOptions="Start"
                                Watermark="Search here...">
    <telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
        <DataTemplate>
            <ListView ItemsSource="{Binding FilteredItems, Source={x:Reference AutoComplete}}"
                        HasUnevenRows="True"
                        ItemSelected="ListView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Label Margin="5"
                                        FontSize="24"
                                        Text="{Binding Name}"
                                        TextColor="Black"/>
                                <Image Grid.Column="1"
                                        Margin="5"
                                        HeightRequest="20"
                                        Source="{Binding ImageSource}"
                                        WidthRequest="20"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
</telerikInput:RadAutoCompleteView>

Then you need to get the autocompleteview SelectedItem method through Reflection. I have attached my test project for reference. Download it and give it a try.

2) Change Width of cell separator line

I am afraid the RadAutoCompleteView does not provide this functionality out of the box. 

Solution:

For example you can add a RadBorder inside the SuggestionViewTemplate:

<telerikInput:RadAutoCompleteView x:Name="AutoComplete"
                                ItemsSource="{Binding Source}"
                                TextSearchPath="Name"
                                VerticalOptions="Start"
                                Watermark="Search here...">
    <telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
        <DataTemplate>
            <ListView ItemsSource="{Binding FilteredItems, Source={x:Reference AutoComplete}}"
                        HasUnevenRows="True"
                        ItemSelected="ListView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Label Margin="5"
                                        FontSize="24"
                                        Text="{Binding Name}"
                                        TextColor="Black"/>
                                <Image Grid.Column="1"
                                        Margin="5"
                                        HeightRequest="20"
                                        Source="{Binding ImageSource}"
                                        WidthRequest="20"/>
                                <primitives:RadBorder BorderThickness="0,0,0,2" BorderColor="LightGray" Grid.ColumnSpan="2"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionViewTemplate>
</telerikInput:RadAutoCompleteView>

I hope the provided information was helpful. Let me know if you have any additional questions on this.

Regards,
Didi
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
AutoCompleteView
Asked by
n/a
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or