RadAutoCompleteBox in DataGridTemplateColumn

[Marco]

Hi!

There seems to be a bug in RadAutoCompleteBox displayed in DataGridTemplateColumns. While editing the DataGrid row the Texts of SelectedItems aren't visible but on lost focus they are.

namespace WpfApplication.ViewModels
{
    public class ListViewModel
    {
        public ListViewModel()
        {
            this.ViewModels = new ObservableCollection<ViewModel>() { new ViewModel() };
        }

        public ObservableCollection<ViewModel> ViewModels { get; set; }

    }

    public class ViewModel
    {
        public ObservableCollection<Country> AvailableCountries { get; set; }
        public ObservableCollection<string> SelectedCountries { get; set; }

        public ViewModel()
        {
            this.AvailableCountries = new ObservableCollection<Country>()
            {
                new Country() { Name = "Australia" , Capital = "Canberra" },
                new Country() { Name = "Bulgaria", Capital = "Sofia" },
                new Country() { Name = "Canada" , Capital = "Ottawa" },
                new Country() { Name = "Denmark" , Capital = "Copenhagen" },
                new Country() { Name = "France" , Capital = "Paris" },
                new Country() { Name = "Germany" , Capital = "Berlin" },
                new Country() { Name = "India" , Capital = "New Delhi" },
                new Country() { Name = "Italy" , Capital = "Rome" },
                new Country() { Name = "Norway" , Capital = "Oslo" },
                new Country() { Name = "Russia" , Capital = "Moscow" },
                new Country() { Name = "Spain " , Capital = "Madrid" },
                new Country() { Name = "United Kingdom" , Capital = "London" },
                new Country() { Name = "United States" , Capital = "Washington, D.C." },
            };

            this.SelectedCountries = new ObservableCollection<string>();

        }
    }
}

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication.ViewModels"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow"
        Width="525"
        Height="350">
    <Window.Resources>
        <local:ListViewModel x:Key="ListViewModel" />
    </Window.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding ViewModels, Source={StaticResource ListViewModel}}">
            <DataGrid.Columns>
                <DataGridTemplateColumn Width="*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadAutoCompleteBox DisplayMemberPath="Name"
                                                        ItemsSource="{Binding AvailableCountries}"
                                                        SelectedItems="{Binding SelectedCountries}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Could you check that please?

[Vladi]

Hi Marco,

We were able to reproduce the described behavior and we are currently investigating what could be the cause of it.

When we have more information on the case we will write in this thread.

Kind regards,
Vladi
the Telerik team

[Vladi]

Hello Marco,

We debugged the issue and found out what is the cause of the issue. We will do our best to have a permanent fix as soon as possible in our next releases of RadControls.

In the mean while you can use this workaround:

1. Using Implicit Styles merge the needed dictionaries for the AutoCompleteBox control (System.Windows.xaml, Telerik.Windows.Controls.xaml and Telerik.Windows.Controls.Input.xaml) in the App.xaml.
2. Customize the RadAutoCompleteBoxItem Style, change its Foreground to black and place it in the App.xaml.

The next code snippet shows how to merge the dictionaries and to create that Style in the App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/System.Windows.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="telerik:RadAutoCompleteBoxItem" BasedOn="{StaticResource RadAutoCompleteBoxItemStyle}">
            <Setter Property="Foreground" Value="Black" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

Hope this is helpful.
 
Regards,
Vladi
the Telerik team

[Marco]

Thanks Vladi!

That works for me.

Greetings,
Marco

[Alex R.]

Using version 2016.2.503.45 I am experiencing the opposite as the user in the original post.  Any ideas?

 

<UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="telerik:RadAutoCompleteBoxItem" BasedOn="{StaticResource RadAutoCompleteBoxItemStyle}">
                <Setter Property="Foreground" Value="Black" />
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

 

<telerik:GridViewDataColumn Name="cDocumentTagColumn" Width="300"  Header="Document Tags">
    <telerik:GridViewDataColumn.CellEditTemplate>
        <DataTemplate>
            <telerik:RadAutoCompleteBox ItemsSource="{Binding AvailableDocumentTags}"
                                        SelectedItems="{Binding DocumentTags}"
                                        DisplayMemberPath="Description"
                                        WatermarkContent="Enter Document Tags"
                                        SelectionMode="Multiple"
                                        Foreground="Black"/>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>

               

[Yana]

Hello Alex,

As the AutoCompleteBox inside the CellEditTemplate is in multiple selection mode, you will need to add also a CellTemplate with ItemsControl inside it which could show multiple items. Here is a quick example with a ListBox:

<telerik:GridViewDataColumn.CellTemplate>
    <DataTemplate>
        <ListBox ItemsSource="{Binding SelectedCountries}" DisplayMemberPath="Name" Width="200">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>

I have also attached a sample project to demonstrate the approach.

Hope this would be helpful.

Regards,
Yana
Telerik

[Alex R.]

My apologies for the delayed response.  Your example worked well, my problem was caused by using CellEditTemplate and not CellTemplate.

 

I do have a new issue.  If I click on my autocomplete box it works great, however if I should tab from the column before it the cell the autocomplete box lives in is active that the autocomplete box is hidden.  How do I get the autocomplete box focus when I tab?

[Nasko]

Hi Alex,

What we could suggest you as one possible approach to achieve the desired behavior is to handle the PreviewKeyUp event of the GridView. Inside it to check if Tab key is pressed and if so to call the BeginEdit method of the GridViewCell:

private void RadGridView_PreviewKeyUp(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Tab)
    {
        var gridViewCell = e.OriginalSource as GridViewCell;
        if (gridViewCell != null)
        {
            gridViewCell.BeginEdit();
        }
    }
}

Please, give it a try and let us know if it worked for you.

Hope this helps.

Regards,
Nasko
Telerik

[qui]

thanks @Vladi, it is helpful