# Data Binding

This topic covers about binding datafilter to data-aware controls.

## Content

The DataFilter control can be bound to any data-aware control or to a model/custom collection. You can choose to bind the control using any of the following ways:

* [Binding with data-aware control](/componentone/docs/wpf/online-datafilter/datafilters/data-binding#binding-with-data-aware-control)
* [Model binding](/componentone/docs/wpf/online-datafilter/datafilters/data-binding#model-binding)

### Binding with data-aware control

When you bind the DataFilter control with a data-aware control, fields are generated. On the basis of these fields present in the data source, different filters are automatically generated in the DataFilter control. These filters are <span data-popup-content="\u003cbr\u003e\r\nThis class is available in \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-framework-api/C1.WPF.DataFilter.4.6.2/C1.WPF.DataFilter.BoolFilter.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-framework-api/C1.WPF.DataFilter.4.6.2/C1.WPF.DataFilter.BoolFilter.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="BoolFilter" data-popup-theme="ui-tooltip-green qtip-green">BoolFilter</span>, <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.RangeFilter.html\u0022\u003e.NET\u003c/a\u003eand \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.RangeFilter.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="RangeFilter" data-popup-theme="ui-tooltip-green qtip-green">RangeFilter</span>, <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.DateRangeFilter.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.DateRangeFilter.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="DateRangeFilter" data-popup-theme="ui-tooltip-green qtip-green">DateRangeFilter</span> and <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.ChecklistFilter.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.ChecklistFilter.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="ChecklistFilter" data-popup-theme="ui-tooltip-green qtip-green">ChecklistFilter</span>. However, the filtering criteria are not generated with these filters, for example, no minimum and maximum values are generated for RangeFilter and empty checklist is generated for ChecklistFilter. So, you need to customize the auto generated filters for defining the filtering criteria using **FilterAutoGenerating** event of the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.C1DataFilter.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datafilter/dotnet-api/C1.WPF.DataFilter/C1.WPF.DataFilter.C1DataFilter.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1DataFilter" data-popup-theme="ui-tooltip-green qtip-green">C1DataFilter</span> class.

### Model binding

1. Define a class named 'Product' that returns the data which is to be bound to the DataFilter and DataGrid.
    **vbnet**

    ```vbnet
    Public Class Product
        Shared _rnd As Random = New Random()
        Shared _names As String() = "Macko|Surfair|Pocohey|Studeby".Split("|"c)
        Shared _lines As String() = "Computers|Washers|Stoves|Cars".Split("|"c)
        Shared _colors As String() = "Red|Green|Blue|White".Split("|"c)
        Public Sub New()
            Name = _names(_rnd.[Next]() Mod _names.Length)
            Line = _lines(_rnd.[Next]() Mod _lines.Length)
            Color = _colors(_rnd.[Next]() Mod _colors.Length)
            Price = 30 + _rnd.NextDouble() * 1000
            Cost = 3 + _rnd.NextDouble() * 300
            Discontinued = _rnd.NextDouble() < 0.2
            Introduced = DateTime.Today.AddDays(_rnd.[Next](-600, 0))
        End Sub
        Public Property Name As String
        Public Property Color As String
        Public Property Line As String
        Public Property Price As Double
        Public Property Cost As Double
        Public Property Introduced As DateTime
        Public Property Discontinued As Boolean
    End Class
    ```

    **csharp**

    ```csharp
    public class Product
    {
        static Random _rnd = new Random();
        static string[] _names = "Macko|Surfair|Pocohey|Studeby".Split('|');
        static string[] _lines = "Computers|Washers|Stoves|Cars".Split('|');
        static string[] _colors = "Red|Green|Blue|White".Split('|');
        public Product()
        {
            Name = _names[_rnd.Next() % _names.Length];
            Line = _lines[_rnd.Next() % _lines.Length];
            Color = _colors[_rnd.Next() % _colors.Length];
            Price = 30 + _rnd.NextDouble() * 1000;
            Cost = 3 + _rnd.NextDouble() * 300;
            Discontinued = _rnd.NextDouble() < .2;
            Introduced = DateTime.Today.AddDays(_rnd.Next(-600, 0));
        }
        public string Name { get; set; }
        public string Color { get; set; }
        public string Line { get; set; }
        public double Price { get; set; }
        public double Cost { get; set; }
        public DateTime Introduced { get; set; }
        public bool Discontinued { get; set; }
    }
    ```
2. Assign a data source to the DataGrid and C1DataFilter. Also, set **AutoGenerateFilters** property to true. 
    **vbnet**

    ```vbnet
    'Assign datasource to the datagrid
    dataGrid.ItemsSource = _products
    'Assign datasource to the C1DataFilter
    c1DataFilter.ItemsSource = _products
    c1DataFilter.AutoGenerateFilters = True
    ```

    **csharp**

    ```csharp
    //Assign datasource to the datagrid
    dataGrid.ItemsSource = _products;
    //Assign datasource to the C1DataFilter
    c1DataFilter.ItemsSource = _products;
    c1DataFilter.AutoGenerateFilters = true;
    ```
3. To customize the auto generated filters for defining the filtering criteria such as the minimum or maximum values for the RangeFilter and the checklist items for the CheckListFilter, subscribe to the **FilterAutoGenerating** event of **DataFilter** class as shown in the following code. Also, add the following code in the event handler of the FilterAutoGenerating event which provides the checklist items for the two filters namely “Name”, “Color” and sets the maximum and minimum value for the price filter. 
    **vbnet**

    ```vbnet
    Private Sub C1DataFilter_FilterAutoGenerating(sender As Object, e As C1.DataFilter.FilterAutoGeneratingEventArgs)
        Select Case e.[Property].Name
            Case "Name"
                Dim brandFilter = CType(e.Filter, C1.WPF.DataFilter.ChecklistFilter)
                brandFilter.ItemsSource = _products
                brandFilter.ValueMemberPath = "Name"
                brandFilter.SelectAll()
            Case "Color"
                Dim categoryFilter = CType(e.Filter, C1.WPF.DataFilter.ChecklistFilter)
                categoryFilter.ItemsSource = _products
                categoryFilter.ValueMemberPath = "Color"
                categoryFilter.SelectAll()
            Case "Price"
                Dim priceFilter = CType(e.Filter, C1.WPF.DataFilter.RangeFilter)
                priceFilter.Maximum = _products.AsEnumerable().Max(Function(x) x.Price)
                priceFilter.Minimum = _products.AsEnumerable().Min(Function(x) x.Price)
                priceFilter.Increment = 1000
                priceFilter.Digits = 0
            Case Else
                e.Cancel = True
        End Select
    End Sub
    ```

    **csharp**

    ```csharp
    private void C1DataFilter_FilterAutoGenerating(object sender, C1.DataFilter.FilterAutoGeneratingEventArgs e)
    {
        switch (e.Property.Name)
        {
            //Set the checklist items for Brand filter
            case "Name":
                var brandFilter = (C1.WPF.DataFilter.ChecklistFilter)e.Filter;
                brandFilter.ItemsSource = _products;
                brandFilter.ValueMemberPath = "Name";
                brandFilter.SelectAll();
                break;
            //Set the checklist items for Category filter
            case "Color":
                var categoryFilter = (C1.WPF.DataFilter.ChecklistFilter)e.Filter;
                categoryFilter.ItemsSource = _products;
                categoryFilter.ValueMemberPath = "Color"; 
                categoryFilter.SelectAll();
                break;
            //Set the minimum/maximum value for the Price filter
            case "Price":
                var priceFilter = (C1.WPF.DataFilter.RangeFilter)e.Filter;
                priceFilter.Maximum = _products.AsEnumerable().Max(x => x.Price);
                priceFilter.Minimum = _products.AsEnumerable().Min(x => x.Price);
                priceFilter.Increment = 1000;
                priceFilter.Digits = 0;
                break;
            //Cancels the creation of all other filters
            default:
                e.Cancel = true;
                break;
        }
    }
    ```
4. To update the data of the data-aware control, subscribe to the **FilterChanged** event of DataFilter as shown in the following code. Add the following code in the event handler of the FilterChanged event which reassigns data source to the FlexGrid control through View property of the C1DataFilter class.
<br>
    **vbnet**

    ```vbnet
    Private Sub C1DataFilter_FilterChanged(sender As Object, e As EventArgs)
        dataGrid.ItemsSource = c1DataFilter.View.Cast(Of Product)().ToList()
    End Sub
    ```

    **csharp**

    ```csharp
    private void C1DataFilter_FilterChanged(object sender, EventArgs e)
    {
        dataGrid.ItemsSource = c1DataFilter.View.Cast<Product>().ToList();
    }
    ```