How To: Filter as you type RadGridView inside RadComboBox for WPF and Silverlight

Friday, April 09, 2010 by Vladimir Enchev | Comments 5

I’ve made small example on how to place RadGridView inside editable RadComboBox and filter the grid items as you type in the combo:

image

 

The easiest way to place any UI element in RadComboBox is to create single RadComboBoxItem and define desired Template:

<telerikInput:RadComboBox Text="{Binding Text, Mode=TwoWay}"
                          IsEditable="True" Height="25" Width="200">
    <telerikInput:RadComboBox.Items>
        <telerikInput:RadComboBoxItem>
            <telerikInput:RadComboBoxItem.Template>
                <ControlTemplate>
                    <telerikGrid:RadGridView x:Name="RadGridView1" ShowGroupPanel="False" CanUserFreezeColumns="False" 
                                             RowIndicatorVisibility="Collapsed" IsReadOnly="True"
                                             IsFilteringAllowed="False" ItemsSource="{Binding Items}" 
                                             Width="200" Height="150" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
                    </telerikGrid:RadGridView>
                </ControlTemplate>
            </telerikInput:RadComboBoxItem.Template>
        </telerikInput:RadComboBoxItem>
    </telerikInput:RadComboBox.Items>
</telerikInput:RadComboBox>


Now you can create small view model and bind the Text property of RadComboBox to desired FilterDescriptor of our powerful QueryableCollectionView:

    public class MyDataContext : INotifyPropertyChanged
    {
        QueryableCollectionView _Items;
        public QueryableCollectionView Items
        {
            get
            {
                if (_Items == null)
                {
                    _Items = new QueryableCollectionView(from i in Enumerable.Range(0, 10000)
                                                         select new MyObject() { ID = i, Name = String.Format("Name{0}", i) });

                    _Items.FilterDescriptors.Add(new FilterDescriptor("Name", FilterOperator.Contains, ""));
                }
                return _Items;
            }
        }

        string _Text;
        public string Text 
        {
            get
            {
                return _Text;
            }
            set
            {
                if (_Text != value)
                {
                    _Text = value;

                    ((FilterDescriptor)_Items.FilterDescriptors[0]).Value = _Text;

                    OnPropertyChanged("Text");
                }
            }
        }
}

 

Happy filtering!

 

5 Comments

  • timtos 22 Sep 2010
    Hi Vladimir,

    great post! Thank you!
    Greetings,
    Tim.
  • Max 28 Jun 2011
    Hi.
    How can I access to this grid by code and obtain a selected row?
    Thanks
  • Max 28 Jun 2011
    Hi.
    How can I access to this grid by code and obtain a selected row?
    Thanks
  • Max 28 Jun 2011
    Hi.
    How can I access to this grid by code and obtain a selected row?
    Thanks
  • Jennifer Overholt 03 Oct 2011
    Hi.
    How can I access to this grid by code and obtain a selected row?
    Thanks

    PLEASE ANSWER HIS QUESTION AS IT PERTAINS TO ME ALSO!

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)