Creating Searchable Custom Data Grid in WPF

Introduction

This Custom Data Grid provides the feature of searching data of each cell's contents and setting the background and foreground color of the cell that satifies the search criteria. The Custom Data Grid has some public properties that assist in finding the value of cells; it is given below.

1. SearchTextBoxName (String): The name of the Text Box Control whose value is to be searched
2. Is EnableSearch (Boolean): enables the Data Grid to search for a value.
3. SearchedValueBackGroundColor (Brush): sets the background color of the cell that contains the search data.
4. SearchedValueForegroundColor (Brush): sets the foreground color of the cell that contains the search data.

I will now explain how to create the custom Data Grid by inheriting from the system Data Grid Control. I have taken a class and inherited the class from the system Data Grid and added some extra feature into the custom data grid. Initialized the default value of some properties of my data grid class.

The procedure to create the custom searchable Data Grid is given below.

1. Start Visual Studio, in the start page create a new project. Select the class library temple then rename it to Searchable Data Grid.
2. Rename the class1 to Data Grid then inherit it from System.Windows.Controls.DataGrid. Add some extra public properties to help the data grid to be searchable. Such as SearchTextbox, IsEnableSearch, SearchValueBackGroundColor, SearchValueForegGroundColor and one more private property that I have not explained above is SearchTextBox.

   See the following code:
   
   publicstring SearchTextBoxName {get; set; }
   public bool IsEnableSearch { get;set; }
   public System.Windows.Media.Brush SearchedValueBackGroundColor { get;set; }
   public System.Windows.Media.Brush SearchedValueForeGroundColor { get;set; }
   private TextBox SearchTextBox {get; set; }
    

3. In the default constructor of the initialization of the properties and set the default value of the properties.
   
   See the following code:
   
   public SearchableDataGrid()
   {
       this.IsEnableSearch =false;
       this.SearchedValueBackGroundColor = System.Windows.Media.Brushes.Yellow;
       this.SearchedValueForeGroundColor = System.Windows.Media.Brushes.Gray;
              
   }
    
4. Using the System.Windows.Media.VisualTreeHelper class, find the text box that exists in the parent controls of your data, whose value is to be searched in the data grid . The following coded helps to find the value of the TextBox.
    

   publicstatic IEnumerable<T> FindVisualChildren<T>(DependencyObject ParentControl) where T : DependencyObject

   {

       if (ParentControl != null)

       {

          for (int i = 0; i < VisualTreeHelper.GetChildrenCount(ParentControl); i++)

           {

               DependencyObject ChildControl = VisualTreeHelper.GetChild(ParentControl, i);

               if (ChildControl != null && ChildControl is T)

               {

                   yield return (T)ChildControl;

               }

    

               foreach (T ChildOfChildControl in FindVisualChildren<T>(ChildControl))

               {

                   yield return ChildOfChildControl;

               }

           }

       }

    }
   
   The preceding function searched the chiled available in the container.
    

5. Override the OnItemsSourceChanged function of the base class; that means "System.Windows.Controls.DataGrid". Call the function mentioned above (FindVisualChildren) that will use the reference of the text box controls whose text is to be searched in the data grid and add the Text change event handler to your TextBox.
   
   See the code below.
   
   protectedoverride void OnItemsSourceChanged(System.Collections.IEnumerable oldValue, System.Collections.IEnumerable newValue)
   {
       //code searchs the textbox control that exists in the parent of datagrid

       base.OnItemsSourceChanged(oldValue, newValue);
       if (this.IsEnableSearch == true &&                       !string.IsNullOrEmpty(this.SearchTextBoxName))
       {
           foreach (TextBox tb in FindVisualChildren<TextBox>(this.Parent))
           {
               if (this.SearchTextBoxName == tb.Name)
                   {
                       this.SearchTextBox = tb;
                       this.SearchTextBox.TextChanged += new TextChangedEventHandler(SearchTextBox_TextChanged);
                   }
            }
        }

   }
    

6. The TextChange event of your datagrid TextBox finds the search value from each cell of your DataGrid view. If the condition is satisfied then it sets the foreground and background colors of your DataGrid View.
   
   private void SearchTextBox_TextChanged(object sender, RoutedEventArgs e)
   {
      TextBox TB = (TextBox)sender;
     foreach(DataGridColumn DGC in this.Columns)
     {
         for (int ind = 0; ind < this.Items.Count; ind++)
         {
    
             FrameworkElement FE = DGC.GetCellContent(this.Items[ind]);
             if (FE!=null && FE.GetType().Name == "TextBlock")
             {
                 TextBlock TX = (TextBlock)FE;
                 if (TX != null)
                 {
                     if (!string.IsNullOrEmpty(TB.Text) && TX.Text.Contains(TB.Text))
                     {
                         System.Windows.Media.BrushConverter BC = new System.Windows.Media.BrushConverter();
                         TX.Background = this.SearchedValueBackGroundColor;
                         TX.Foreground = this.SearchedValueForeGroundColor;
                     }
                     else
                     {
                         TX.Background = System.Windows.Media.Brushes.White;
                         TX.Foreground = System.Windows.Media.Brushes.Black;
                     }
                 }
             }
         }
      }
   
   The code mentioned above will help you to create a custom Data Grid Control. If you have any query then feel free to comment and if this solves your problem then please don't forget to like to this article.