Ag Grid Search Configuration for Efficient Data Retrieval

Author

Reads 243

Gray Mesh Cover
Credit: pexels.com, Gray Mesh Cover

Ag Grid Search Configuration for Efficient Data Retrieval is a crucial aspect of optimizing your grid's performance. The default search configuration can be limiting, especially when dealing with large datasets.

To overcome this limitation, you can configure the search function to use a more efficient approach, such as the 'filter' property. This allows you to specify a custom filtering function.

Using the 'filter' property can significantly improve search performance by reducing the number of rows that need to be processed. For instance, if you have a column with a specific format, you can create a custom filter function to extract the relevant data.

By leveraging the 'filter' property, you can create a more efficient search configuration that meets your specific needs.

Getting Started

To start using the ag grid search feature, you need to set up the search operation on the grid data after it renders. However, you can also perform a search operation during the initial rendering of the grid using the initial search feature.

Credit: youtube.com, Quickstart Tutorial for the React Data Grid from AG Grid

By default, the grid searches all bound column values. But you can customize this behavior by defining the searchSettings.fields property.

To apply search at initial rendering, you need to set up the searchSettings object with the required properties. These properties include fields, operator, key, ignoreCase, and ignoreAccent.

The fields property specifies the fields in which the search operation needs to be performed. The operator property specifies the operator to be used for the search operation. The key property specifies the key value to be searched. The ignoreCase property determines whether the search operation is case-sensitive or case-insensitive. The ignoreAccent property ignores diacritic characters or accents in the text during a search operation.

Here's an example of how to set an initial search in the grid using the searchSettings property:

In the example, the searchSettings object is set with the following values: fields: CustomerID, operator: contains, key: Ha, ignoreCase: true, and ignoreAccent: true.

Search Operators

Credit: youtube.com, Dynamic filter / Search bar in Angular AG Grid table

Search Operators are a crucial part of the ag grid search functionality. They allow you to define the type of comparison or condition applied during a search operation.

By default, the searchSettings.operator is set to contains, which returns the values contains the search key. The following operators are supported in searching:

These operators provide flexibility in defining the search behavior and allow you to perform different types of comparisons based on your requirements.

Search Configuration

The Quick Filter configuration is crucial for a seamless search experience. You can customize the Quick Filter to work with different data types, including complex objects with 'dot' in fields.

The Quick Filter parser allows for exact searches using quotes, and the quickFilterMatcher enables regular expressions. For instance, entering "gold: 1" will only match Results with that value, while 2[012] will match Age 20, 21, and 22.

To further enhance the Quick Filter, you can set the cacheQuickFilter option to true or false. With the cache turned on, the grid works fast even with large data sets. However, for smaller data sets, the cache might not be necessary.

Credit: youtube.com, agGrid + angular: quick filter, global search, multi column filter

The Quick Filter cache can be cleared automatically when the option is changed. This is particularly useful when experimenting with different settings.

You can also set the initial Quick Filter text via the quickFilterText grid option. The provided text will be split into words, and each word will be compared against the row. For example, if the text is "Tony Ireland", the Quick Filter will only include rows with both "Tony" AND "Ireland" in them.

Here are the available filter options for text and object Cell Data Types:

Setting the

Setting the Quick Filter can be a bit tricky, but don't worry, I've got you covered.

You can set the Quick Filter text by calling the setGridOption('quickFilterText', text) method on the grid API. This is useful if you want to dynamically change the Quick Filter text based on user input or other events.

The initial Quick Filter text can also be set via the quickFilterText grid option. This is a great way to pre-populate the Quick Filter with a specific search term.

Credit: youtube.com, Atlas Search Configuration & Development Environment

To set the Quick Filter text, you'll need to use a string value that will be split into words. Each word will be compared against the row, and all words must match the row for it to be included. For example, if the text is "Tony Ireland", the Quick Filter will only include rows with both "Tony" AND "Ireland" in them.

Here are some key things to keep in mind when setting the Quick Filter text:

  • Use a string value that will be split into words.
  • Each word will be compared against the row, and all words must match the row for it to be included.
  • Use quotes to perform exact searches, e.g. "gold: 1" will only match Results with that value.
  • Use regular expressions to perform more complex searches, e.g. 2[012] will match Age 20, 21 and 22.

Parameters

The parameters of search configuration are crucial to get right. You can set the width of the Advanced Filter Builder add button select popup to 120 pixels by default.

The Advanced Filter Builder can be configured using the IAdvancedFilterBuilderParams interface, which has several properties that can be set. These include addSelectWidth, minWidth, pillSelectMaxWidth, pillSelectMinWidth, and showMoveButtons.

To customize the parameters passed to the Advanced Filter Builder, you can use the grid option advancedFilterBuilderParams. This is especially useful when you want to display buttons allowing the filter rows to be moved up and down.

Credit: youtube.com, E360: Configuration - Configure Smart Search

The Advanced Filter Builder can be launched via the showAdvancedFilterBuilder grid API method, and hidden via the hideAdvancedFilterBuilder method. The advancedFilterBuilderVisibleChanged event is fired when the Advanced Filter Builder is shown or hidden.

The filter options for all Cell Data Types can be set via filterOptions. This includes options such as contains, does not contain, equals, not equal, begins with, and ends with.

Here are some of the available filter options:

You can also set properties like caseSensitive, includeBlanksInEquals, includeBlanksInLessThan, and includeBlanksInGreaterThan to customize the filter behavior.

Parser and Matcher

The Quick Filter in ag grid is incredibly powerful, but you may want to customize its behavior to suit your needs. By providing a quickFilterParser, you can override the default text splitting behavior, allowing you to use quotes to search for exact string values.

The parser function receives a value that's already been converted to upper case, so you don't have to worry about handling case sensitivity. This flexibility can be a game-changer for certain types of searches.

You can also customize the matching logic by providing a quickFilterMatcher. This allows you to perform searches via regular expressions, which can be especially useful for complex searches.

Parser

Black and White Geometric Representation of Data
Credit: pexels.com, Black and White Geometric Representation of Data

The Quick Filter Parser is a powerful tool in AG Grid that allows you to customize how text is split into words for comparison against rows.

By default, the Quick Filter splits the text into a list of words, but you can override this behavior by providing a quickFilterParser. This is useful if you want to allow using quotes to search for exact string values.

Note that the value passed to the parser will have already been converted to upper case, so you don't need to worry about case sensitivity.

Enabling the Multi

Enabling the Multi is a crucial step in creating a robust parser and matcher. By default, the Multi Filter will show a Text Filter and Set Filter, but you can specify which filters you would like to use in the filters array.

The filters will be displayed in the same order as they are specified. For instance, the Athlete column has a Multi Filter with default behavior.

Credit: youtube.com, How Does Resume Parsing Work?

You can configure the child filters explicitly, using the Text, Number, and Date Simple Filters respectively. The Country, Gold, and Date columns have Multi Filters with child filters configured explicitly.

Different filterParams can be supplied to each child filter. This allows for a high degree of customization and flexibility in your parser and matcher.

Here's a quick rundown of the properties available on the IMultiFilterModel interface:

Example and Configuration

The ag grid search feature is incredibly powerful and flexible, allowing you to configure it to meet your specific needs.

You can use the Quick Filter to search for data in various ways, including exact searches using quotes and regular expressions.

To configure the Quick Filter, you can use a quickFilterParser to allow exact searches using quotes, and a quickFilterMatcher to allow regular expressions.

The Quick Filter cache can be turned on or off, with the cache being used by default. Turning the cache on can improve Quick Filter speed for large data sets, but it's not necessary for small data sets.

Credit: youtube.com, Custom Filter Components for AG Grid's Javascript Data Grid

Here are some key settings for the Quick Filter cache:

You can also configure the Advanced Filter Builder using the IAdvancedFilterBuilderParams interface, which allows you to customize various settings such as the width of the add button select popup and the minimum width of the Advanced Filter Builder popup.

Some key settings for the Advanced Filter Builder include:

  • addSelectWidth: the width in pixels of the Advanced Filter Builder add button select popup
  • minWidth: the minimum width in pixels of the Advanced Filter Builder popup
  • pillSelectMaxWidth: the maximum width in pixels of the Advanced Filter Builder pill select popup
  • pillSelectMinWidth: the minimum width in pixels of the Advanced Filter Builder pill select popup
  • showMoveButtons: whether to show the move up and move down buttons in the Advanced Filter Builder

The Advanced Search feature in ag grid allows you to filter your data with precision. By enabling the Advanced Filter, you can create complex filter expressions using AND and OR operators, as well as brackets.

You can access the Advanced Filter by setting the property enableAdvancedFilter to true. By default, it's displayed between the column headers and the grid rows, where the Floating Filters would be displayed if they were enabled.

To use the Advanced Filter, start by typing in the input field, and the list of suggested column names will be filtered down as you type. Select the column you want to filter on, and then choose the operator and value. You can also use the Advanced Filter Builder to create a hierarchical view of your filter.

Credit: youtube.com, Ag-grid angular - Sorting and Filtering

The Advanced Filter Builder is a powerful tool that allows you to create complex filters with ease. You can launch it by clicking the Builder button next to the Advanced Filter input, or by using the showAdvancedFilterBuilder API method.

Here are some key features of the Advanced Filter Builder:

And-Filtering vs. Or-Filtering

AND-filtering is the default behavior of AG Grid, requiring rows to pass every column filter condition to be filtered through.

This means that rows must meet all the specified criteria to be included in the filtered result. For example, if you apply two filter conditions, a row must match both conditions to be filtered through.

OR-filtering, on the other hand, allows rows that pass any filter condition to be filtered through. This is in contrast to AND-filtering, which requires rows to meet all conditions.

As seen in the example, applying OR-filtering to a dataset can result in a different outcome. The filtered result contains both rows from the previous filter, but also an additional record that matches only one of the specified filter conditions.

The additional record in the OR-filtered result is the athlete "Anderson", who matches the condition "sport="Volleyball"" but not the other condition. This highlights the key difference between AND-filtering and OR-filtering.

Enabling Advanced

Credit: youtube.com, Super GOOGLE: Top 12 Advanced Search Techniques

Enabling Advanced Filter is a crucial step in unlocking the full potential of Advanced Search. To do this, you need to set the property enableAdvancedFilter = true.

This will display the Advanced Filter between the column headers and the grid rows, where the Floating Filters would be displayed if they were enabled. By default, this is where the Advanced Filter will appear.

The Advanced Filter allows you to build complex filter expressions using AND and OR operators, along with brackets - ( and ). This gives you a lot of flexibility in how you can search your data.

To get started, simply type into the Advanced Filter input and watch as the list of suggested column names is filtered down. From there, you can select the columns and filter options you want to use.

It's worth noting that Advanced Filter and Column Filters cannot be active at the same time. Enabling Advanced Filter will disable Column Filters. So, you'll need to choose which one you want to use.

Credit: youtube.com, Using the Advanced Search Query Builder

Here are some key things to keep in mind when using the Advanced Filter:

  • Start typing into the input to see the list of suggested column names.
  • Select the columns and filter options you want to use.
  • Use AND and OR operators to build complex filter expressions.
  • Use brackets - ( and ) to group your filter expressions.
  • Press Enter or click the Apply button to execute the filter.

Frequently Asked Questions

Can I use AG Grid for free?

Yes, AG Grid is free for everyone, including production use, with no license required. You can use the Community version for free, but for more features and support, consider the Enterprise version.

Keith Marchal

Senior Writer

Keith Marchal is a passionate writer who has been sharing his thoughts and experiences on his personal blog for more than a decade. He is known for his engaging storytelling style and insightful commentary on a wide range of topics, including travel, food, technology, and culture. With a keen eye for detail and a deep appreciation for the power of words, Keith's writing has captivated readers all around the world.

Love What You Read? Stay Updated!

Join our community for insights, tips, and more.