AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Ag grid number filter1/8/2024 This approach will allow your users to filter large datasets with ease and quickly find the data they're looking for. I hope this article helps illustrate how to configure your AG Grid to deliver both OR-filtering in addition to the default AND-filtering behavior. You can see the sample in action, applying OR-filtering together with AND-filtering in the GIF below using the following filter query: (country="Keyna || sport="Beach Volleyball") & year=2012 Summary See the Rendering section for more information. string: Provide a specific filter to use instead of the default filter. The default is Text Filter for AG Grid Community and Set Filter for AG Grid Enterprise. This is why grid receives data that may already be OR-filtered and can apply its built-in AND-filtering conditions on top the OR-filtered data if needed. boolean: Set to True to enable the default filter. This means that the OR-filtering is applied externally from the grid and is transparent to it. Instead, the AG Grid instance binds its rowData property to DataContext.orFilteredRowData immutably as shown below: // src/Components/MyGrid.js One of the key aspects of this approach is that AG Grid row data is not directly bound to the unfiltered original set of rows. The orFilteredData is then bound to our AG Grid instance's rowData property and displayed. SelectedFilterOptions & selectedFilterOptions.some(selectedFilters => selectedFilters = value)ĭtOrFilteredRowData(updatedFilteredRowData) UpdatedFilteredRowData = dataContext.rowData To demonstrate this let's take the following dataset: [ In contrast, OR-filtering conditions allow rows that pass any filter condition to be filtered through. The default filtering behavior of AG Grid applies AND-filtering, which means that rows must pass every column filter condition to get filtered through. The AND-filtering tool panel will then apply AND-Filtering conditions to AG Grid row data, displaying the matching records in the grid. The OR-filtering tool panel will apply OR-Filtering conditions to the data and bind the result to the AG Grid row data property. We've added two custom tool panels to let you set the AND and OR-filtering conditions separately, as shown in the screenshot below. You can add your own tool panels for any custom functionality. Custom Filter Panel for OR-filter conditionsĪG Grid allows you to display tool panels alongside the grid - by default you have a columns and a filters tool panel. See this implemented in the sample below: We will do this by adding a Custom Tool Panel component to allow the end-user to enter OR-filtering conditions and applying the OR-filtering conditions before binding the data to the grid, thus enabling the grid to apply its default AND-filtering later on. In this post we will demonstrate how you can apply OR-Filtering conditions in AG Grid while also maintaining the option to filter by AG Grid's default AND-filter conditions.
0 Comments
Read More
Leave a Reply. |