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

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!

 

,
Senior Technical Architect

5 Comments

timtos
Hi Vladimir,

great post! Thank you!
Greetings,
Tim.
Max
Hi.
How can I access to this grid by code and obtain a selected row?
Thanks
Max
Hi.
How can I access to this grid by code and obtain a selected row?
Thanks
Max
Hi.
How can I access to this grid by code and obtain a selected row?
Thanks
Jennifer Overholt
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!

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools


Follow vladimir_enchev on Twitter