How To: Custom filter row with RadGridView for Silverlight

Tuesday, April 07, 2009 by Vladimir Enchev | Comments 34
?
Email to a friend

Since our RadGrid for ASP.NET AJAX filter row is very popular, I’ve made small demo how to achieve the same in RadGridView for Silverlight:

Untitled 

To turn on this for your grid you can simply set GridViewFilterRow.IsEnabled attached property:

<UserControl x:Class="CustomFilterRow.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikGridViewFilter="clr-namespace:Telerik.Windows.Controls.GridView.Filter" 
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGridView x:Name="RadGridView1" AutoGenerateColumns="False"
            telerikGridViewFilter:GridViewFilterRow.IsEnabled="True">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn HeaderText="ID" DataMemberBinding="{Binding ID}" />
                <telerik:GridViewDataColumn HeaderText="Name" DataMemberBinding="{Binding Name}" Width="300" />
                <telerik:GridViewDataColumn HeaderText="Date" DataMemberBinding="{Binding Date}" DataFormatString="{}{0:d}" Width="120" />
                <telerik:GridViewDataColumn HeaderText="UnitPrice" DataMemberBinding="{Binding UnitPrice}" DataFormatString="{}{0:c2}" Width="120" />
                <telerik:GridViewDataColumn HeaderText="Discontinued" DataMemberBinding="{Binding Discontinued}" />
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>


Enjoy!

[Download]

?
Email to a friend

34 Comments

  • Vladislav 06 May 2009
    Hi Vladimir,
    thank you for the great post. I've got a question for you though. I tried the code you have posted here and it works in case I bind to data synchroniously. The problem is with asynchroniuos data binding. I've taken a look at the code at debug time and found that in your
    private void InitializeFilters(GridViewHeaderRow row)
    method column.DataType is null
    My guess is that the filter constructing code relies on actual data bound to a RadGridView . 
    But how do I work around late(async) databinding?
    Thank you,
    Vladislav.
  • Vlad 12 May 2009
    Hi  Vladislav,

    Please check this project for more info:
    http://blogs.telerik.com/Libraries/Vladimir_Enchev/CustomFilterRowAsync.sflb?download=true

    Vlad
  • fred 24 Aug 2009
    I keep getting error : The property 'IsEnabled' does not exist on the type 'RadGridView' in the XML namespace 'clr-namespace:Telerik.Windows.Controls.GridView.Filter' when I try to compile. The GridViewFilterRow class is added to my project. What am I missing?
  • fred 24 Aug 2009
    Hi Vlad,

    I keep getting error : The property 'IsEnabled' does not exist on the type 'RadGridView' in the XML namespace 'clr-namespace:Telerik.Windows.Controls.GridView.Filter'. The GridViewFilterRow class is already added to the project under that namespace. What am I missing here?
  • Vlad 03 Sep 2009
    Hi fred,

    You can check/download the recent version of the same example from our online demos:
    http://demos.telerik.com/silverlight/#GridView/CustomFilterRow

    Vlad
  • Jose 11 Sep 2009
    Hi, I'm evaluating options for a WPF project.
    This could be used with the wpf version ?
  • Jose 11 Sep 2009
    Hi, I'm evaluating options for a WPF project.
    This could be used with the wpf version ?
  • Vlad 14 Sep 2009
    Hi Jose,

    You can use the same code in WPF application however you will need to change RadMenu and RadMenuItem to default WPF menu. RadMenu will be added to our WPF controls for Q3 2009 (late October).

    Vlad
  • Jose 14 Sep 2009
    Thank you! I will take a look..
  • Jose F. Romaniello 14 Sep 2009
    Vladimir, you were right. It's work very well.
    I had to make few changes for the RadMenu and other things. Now it's working.
    I can share the modified version, drop me a mail to jfromaniello at gmail dot com if you are interested.
  • Vlad 16 Sep 2009
    Hi Jose,

    You can submit directly your project in our code library section:
    http://www.telerik.com/community/code-library/wpf/gridview.aspx

    Vlad
  • Pratush 01 Oct 2009
    Hi Vlad,
    We are working on a project which will go live early next year.I am using 2009_2_0911 for sometime now. I recently came across this post and tried integrating. I ended up with following exception -
    "Unhandled Error in Silverlight 2 Application Object reference not set to an instance of an object.   at Telerik.Windows.Controls.GridView.Filter.GridViewFilterRow.InitializeFilters(GridViewHeaderRow row)
       at Telerik.Windows.Controls.GridView.Filter.GridViewFilterRow.Attach()"
    I tried today with the latet 2009_2_0925 as well, but no luck. It works fine when I change the refrences to older dlls which are there in the example you shared.

    Is this a known issue? I would love to use this feature..

    Thanks,
    Pratush
  • Vlad 02 Oct 2009
    Hi Pratush,

    I've attached small example using our latest internal build. Let me know how it goes.

    Vlad
  • Pratush 12 Oct 2009
    Thanks Vlad
    It works fine now with the latest controls.
    I forgot one to mention one small detail ..I am using DomainDataSource to populate telerik rad grid view.  I am able to provide proper filtering (across the pages) on domain data source as mentioned in the demo examples. But I am not able to make this filter row work.
    Getting null value in the column.datatype for GridViewDataColumn. Not sure if using the Background worker would be a good workaround..

    Thanks,
    Pratush
  • Pratush 19 Oct 2009
    Hi Vlad,
    I had fixed this issue with DomainDataSource by modifying the code for GridViewDataColumn class. Instead of RowLoaded, I used DataLoaded event to InitializeFilters. Also, instead of binding ffd.FieldName to column.UniqueName, I am binding it to column.DataMemberBinding.Path.Path property. It is working fine now..I also provided a toggle filter button which shows/hides the filter row.

    Thanks,
    Pratush
  • Matt Pavelko 21 Oct 2009
    Does this work in SL 3? 

    I can't use the IsEnabled property in the xaml. 

    I can't use the number pad on the keyboard inside the filterrow fields that are actually numeric, but I CAN use the number pad inside the filterrow columns that are text fields. 

    I'm using a container that is not a telerik container, and when I dock this container in my app, the filter image on the menu button disappears and never comes back.

    If the user resizes any of the grid columns, the FilterRow is totally messed up; cant see the column label or the filter text box.

    Someone please advise...I got the code directly from the Silverlight demo site.  The only way I was able to even get it working is in the code behind of my page with the grid on it, I added in my constructor:

          GridViewFilterRow.SetIsEnabled(this.QueryDetailsDataGrid, true);

    In my opinion this is how the filtering should work, built in.  The BUILT-IN filtering seems to work in a way that if I want to view all rows where name = "Matt", I need to type it in twice!  Once in the first textbox, and then again in the textbox under the "AND" word. 

    Thanks,
    Matt
  • Vlad 23 Oct 2009
    Hi Matt,

    I'm not sure about all these issues however if you can send us small example (via support ticket) where these can be debugged I'll gladly help you. You can check also this demo for the latest version:
    http://demos.telerik.com/silverlight/beta/#GridView/CustomFilterRow

    Vlad
  • Sanjay 10 Jan 2010
    Hi Vlad,

    I am facing a problem with this. if I set the width of First column it doesn't work.

    Could you please help me here ?

    Thanks,
    Sanjay
  • Donta Dalpoas 12 Mar 2010
    Hello,
    I've implemented the custom row filtering for WPF but have a question. How do I force the filter to take place as the user types in the textbox. Right now the filter doesn't fire until the user gets out of the textbox he/she is typing into....Thanks, Donta
  • Donta Dalpoas 12 Mar 2010
    Hello,
    I've implemented the custom row filtering for WPF but have a question. How do I force the filter to take place as the user types in the textbox. Right now the filter doesn't fire until the user gets out of the textbox he/she is typing into....Thanks, Donta
  • Saurav 16 Apr 2010
    Hi,

    Below is the problem thar I am facing using telerik RadGrid filter optiom
    The Filtering option does not seem to actually work. The results don't change.

    can any one guess the reason !


    Regards,
    Saurav

  • Saurav 16 Apr 2010
    Hi,

    Below is the problem thar I am facing using telerik RadGrid filter optiom
    The Filtering option does not seem to actually work. The results don't change.

    can any one guess the reason !


    Regards,
    Saurav

  • Saurav 16 Apr 2010
    Hi,

    Below is the problem thar I am facing using telerik RadGrid filter optiom
    The Filtering option does not seem to actually work. The results don't change.

    can any one guess the reason !


    Regards,
    Saurav

  • Fabrice 11 Jun 2010
    This is a really useful example, however, it doesn't work fine with EnableColumnVirtualization="True" because not all column headers are available all the time.
    Could you please improve the example so we can use this kind of filter row without having to set EnableColumnVirtualization to False?
  • Fabrice 12 Jun 2010
    I found out that the demo for this in 2010 Q2 has been improved and it works now with virtualization.
  • Jason 26 Aug 2010
    Since this is so popular, why isnt it part of the control to begin with?
  • Renata 08 Apr 2011
    Does this work in Silverlight 3? Thanks
  • Ben 07 Jul 2011
    Are there any good examples of how to implement a custom filter row with server side paging?
  • Ben 07 Jul 2011
    Are there any good examples of how to implement a custom filter row with server side paging?
  • kure256 08 Jul 2011
    Hello, 
    I copied this code example from http://demos.telerik.com/silverlight/#GridView/CustomFilterRow and copied particular *.xaml + *.cs to my project to see  filtering. 
    It works fine but when Silverlight page is created, than something   compress all textboxes under first column in the grid. However I click to column header, or click on filter icon than  filter row is automatically refreshed and everything is working fine.
    I have Silverlight 4.0, .NET 4.0 
    Thank you
     

  • Michal Kuritka 09 Jul 2011
    Hello,
    Silverlight example on the page http://demos.telerik.com/silverlight/#GridView/CustomFilterRow is wrong. 
    There would be added binding to ActualWidth  property.
    You can repair error in CustomFilterRow.PlaceCommonHeaders(). At the end of this method you must add something like this:

    public class CustomFilterRow
    {
        .......
       private void PlaceCommonHeaders()
       {
           ...........
       foreach (ColumnFilterCell cell in filteringRow.CustomFilterRowGrid.Children)
                {
                    Binding columnWidthBinding = new Binding("ActualWidth");
                    columnWidthBinding.Source = cell.Column;                                                
                    cell.SetBinding(ColumnFilterCell.WidthProperty, columnWidthBinding);          
                }
       }
       ..........
    }
  • Michal Kuritka 11 Jul 2011
    Hello , filter is working well and it is usefull, but there are two issues. 
    1) It would be possible to change textbox fields in the filter by Tab key (there are notsetted  tab indexes). 

    2)When create datetime column, tart date is 1.1.0001. All business requiements are routed to lasst few years.  Sop, it would be best to be able to set date time in code / xaml.

    Thank you 
    Michal K
  • Nirolf C 24 Aug 2011
    Hi,
    First of all: this is a great customization(especially the async one)!
    Is there an updated version of this that will work with the latest release (Q2.2011)? If not, is there a chance of such update to appear?
    Thanks,
    Nirolf C
  • Nibedita Patra 27 Apr 2012
    How to get Filter data from the Telerik radgridview and how to convert it in to datatable . Its urgent can u help me any one.

Add comment

  1. Formatting options
       
     
    		 
    		 
     
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools
RSS Feed
Bloggers Archive Tags