RadAutoCompleteBox in DataGridTemplateColumn

8 posts, 1 answers
  1. Marco
    Marco avatar
    6 posts
    Member since:
    Aug 2011

    Posted 23 Nov 2012 Link to this post

    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:local="clr-namespace:WpfApplication.ViewModels"
            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?
  2. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 28 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 30 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Marco
    Marco avatar
    6 posts
    Member since:
    Aug 2011

    Posted 29 Dec 2012 Link to this post

    Thanks Vladi!

    That works for me.

    Greetings,
    Marco
  6. Alex R.
    Alex R. avatar
    8 posts
    Member since:
    Dec 2011

    Posted 26 May Link to this post

    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>

                   

  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 31 May Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Alex R.
    Alex R. avatar
    8 posts
    Member since:
    Dec 2011

    Posted 30 Jun in reply to Yana Link to this post

    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?

  9. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 04 Jul Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready