SuggestionItemTemplate cell height request

[n/a]

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>

 

[Didi]

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