Skip to content

Commit 375ee15

Browse files
Merge pull request #1260 from syncfusion-content/FLUT-958402-FilterPopup
FLUT-958402 - [Others] API Link Added
2 parents 733b9f8 + a1f67c0 commit 375ee15

File tree

2 files changed

+37
-37
lines changed

2 files changed

+37
-37
lines changed

Flutter/datagrid/filtering.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1520,47 +1520,47 @@ By default, the `FilterBehavior.strongDataType` applies to numeric, String, and
15201520

15211521
The `SfDataGrid` provides complete color customization support for the filter popup menu, allowing you to personalize its appearance and enhance its visual appeal.
15221522

1523-
You can apply custom colors and personalize the filter popup menu by configuring the properties listed below through the `SfDataGridTheme.` To enable this, ensure that the `SfDataGrid` is wrapped inside an `SfDataGridTheme` widget.
1523+
You can apply custom colors and personalize the filter popup menu by configuring the properties listed below through the `SfDataGridTheme`. To enable this, ensure that the `SfDataGrid` is wrapped inside an `SfDataGridTheme` widget.
15241524

15251525
The `SfDataGridThemeData` and `SfDataGridTheme` classes are available in the [syncfusion_flutter_core](https://pub.dev/packages/syncfusion_flutter_core) package. So, make sure to import the following file.
15261526

15271527

15281528
| Properties | Description |
15291529
|---------------------------|-----------------------------------------------------|
1530-
| `advancedFilterPopupDropdownColor` | You can customize the background color of the dropdown in the advanced filter popup using the [SfDataGridThemeData.advancedFilterPopupDropdownColor]() property. |
1531-
| `advancedFilterPopupDropdownIconColor` | The color of the dropdown icon in the advanced filter popup can be customized using the [SfDataGridThemeData.advancedFilterPopupDropdownIconColor]() property. |
1532-
| `advancedFilterTypeDropdownFocusedBorderColor` | You can customize the focused border color of the advanced filter type dropdown by using the [SfDataGridThemeData.advancedFilterTypeDropdownFocusedBorderColor]() property. |
1533-
| `advancedFilterTypeDropdownIconColor` | The background color of the advanced filter type dropdown icon in the `SfDataGrid` can be customized using the [SfDataGridThemeData.advancedFilterTypeDropdownIconColor]() property. |
1534-
| `advancedFilterValueDropdownFocusedBorderColor` | The focused border color of the advanced filter value dropdown can be customized using the [SfDataGridThemeData.advancedFilterValueDropdownFocusedBorderColor]() property. |
1535-
| `advancedFilterValueDropdownIconColor` | Customize the background color of the advanced filter value dropdown icon using the [SfDataGridThemeData.advancedFilterValueDropdownIconColor]() property. |
1536-
| `advancedFilterValueTextAreaCursorColor` | The cursor color in the advanced filter value text area can be customized using the [SfDataGridThemeData.advancedFilterValueTextAreaCursorColor]() property. |
1537-
| `andRadioActiveColor` | The active (selected) color of the "AND" radio button in the advanced filter can be customized using the [SfDataGridThemeData.andRadioActiveColor]() property. |
1538-
| `andRadioFillColor` | The fill color of the "AND" radio button in the advanced filter can be customized using the [SfDataGridThemeData.andRadioFillColor]() property. |
1539-
| `appBarBottomBorderColor` | You can customize the color of the bottom border of the AppBar by using the [SfDataGridThemeData.appBarBottomBorderColor]() property. |
1540-
| `calendarIconColor` | The color of the calendar icon in the filter popup menu can be customized using the [SfDataGridThemeData.calendarIconColor]() property. |
1541-
| `cancelFilteringLabelButtonColor` | The color of the cancel button in the filter popup can be customized using the [SfDataGridThemeData.cancelFilteringLabelButtonColor]() property. |
1542-
| `cancelFilteringLabelColor` | You can customize the color of the cancel label text in the filter popup menu by using the [SfDataGridThemeData.cancelFilteringLabelColor]() property. |
1543-
| `captionSummaryRowColor` | The background color of the caption summary row in the `SfDataGrid` can be customized using the [SfDataGridThemeData.captionSummaryRowColor]() property. |
1544-
| `caseSensitiveIconActiveColor` | The active (selected) color of the case-sensitive icon in the filter popup menu can be customized using the [SfDataGridThemeData.caseSensitiveIconActiveColor]() property. |
1545-
| `caseSensitiveIconColor` | The default color of the case-sensitive icon in the filter popup menu can be customized using the [SfDataGridThemeData.caseSensitiveIconColor]() property. |
1546-
| `closeIconColor` | The color of the close icon, which is used to clear the input text in the search area of the filter popup's TextField, can be customized using the [SfDataGridThemeData.closeIconColor]() property. |
1547-
| `filterPopupBackgroundColor` | You can customize the background color of the filter popup menu by using the [SfDataGridThemeData.filterPopupBackgroundColor]() property. |
1548-
| `filterPopupBottomDividerColor` | The [SfDataGridThemeData.filterPopupBottomDividerColor]() property allows you to define a custom color for the bottom divider in the filter popup, helping to match your application's theme. |
1549-
| `filterPopupCheckColor` | The checkmark color of the checkbox in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupCheckColor]() property. |
1550-
| `filterPopupCheckboxFillColor` | You can customize the fill color of checkboxes within the filter popup menu by using the [SfDataGridThemeData.filterPopupCheckboxFillColor]() property. |
1551-
| `filterPopupDisabledIconColor` | Use the [SfDataGridThemeData.filterPopupDisabledIconColor]() property to define a custom color for disabled icons in the filter popup menu. |
1552-
| `filterPopupIconColor` | The color of icons displayed in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupIconColor]() property. |
1553-
| `filterPopupInputBorderColor` | You can customize the border color of the input field in the filter popup menu by using the [SfDataGridThemeData.filterPopupInputBorderColor]() property. |
1554-
| `filterPopupTopDividerColor` | The color of the top divider in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupTopDividerColor]() property. |
1555-
| `noMatchesFilteringLabelColor` | The color of the 'No Matches' label, displayed when no results are found in the filter popup menu, can be customized using the [SfDataGridThemeData.noMatchesFilteringLabelColor]() property. |
1556-
| `okFilteringLabelButtonColor` | The color of the OK button in the filter popup menu can be customized using the [SfDataGridThemeData.okFilteringLabelButtonColor]() property. |
1557-
| `okFilteringLabelColor` | You can customize the color of the OK label text in the filter popup menu by using the [SfDataGridThemeData.okFilteringLabelColor]() property |
1558-
| `okFilteringLabelDisabledButtonColor` | The color of the disabled OK button in the filter popup menu can be customized using the [SfDataGridThemeData.okFilteringLabelDisabledButtonColor]() property |
1559-
| `orRadioActiveColor` | The active (selected) color of the 'OR' radio button in the advanced filter can be customized using the [SfDataGridThemeData.orRadioActiveColor]() property. |
1560-
| `orRadioFillColor` | The fill color of the 'OR' radio button in the advanced filter can be customized using the [SfDataGridThemeData.orRadioFillColor]() property. |
1561-
| `searchAreaCursorColor` | The cursor color in the search area of the filter popup menu can be customized using the [SfDataGridThemeData.searchAreaCursorColor]() property. |
1562-
| `searchAreaFocusedBorderColor` | Use the [SfDataGridThemeData.searchAreaFocusedBorderColor]() property to define the focused border color of the search area in the filter popup menu |
1563-
| `searchIconColor` | The color of the search icon in the search area of the filter popup menu can be customized using the [SfDataGridThemeData.searchIconColor]() property. |
1530+
| `advancedFilterPopupDropdownColor` | You can customize the background color of the dropdown in the advanced filter popup using the [SfDataGridThemeData.advancedFilterPopupDropdownColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterPopupDropdownColor.html) property. |
1531+
| `advancedFilterPopupDropdownIconColor` | The color of the dropdown icon in the advanced filter popup can be customized using the [SfDataGridThemeData.advancedFilterPopupDropdownIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterPopupDropdownIconColor.html) property. |
1532+
| `advancedFilterTypeDropdownFocusedBorderColor` | You can customize the focused border color of the advanced filter type dropdown by using the [SfDataGridThemeData.advancedFilterTypeDropdownFocusedBorderColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterTypeDropdownFocusedBorderColor.html) property. |
1533+
| `advancedFilterTypeDropdownIconColor` | The background color of the advanced filter type dropdown icon in the `SfDataGrid` can be customized using the [SfDataGridThemeData.advancedFilterTypeDropdownIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterTypeDropdownIconColor.html) property. |
1534+
| `advancedFilterValueDropdownFocusedBorderColor` | The focused border color of the advanced filter value dropdown can be customized using the [SfDataGridThemeData.advancedFilterValueDropdownFocusedBorderColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterValueDropdownFocusedBorderColor.html) property. |
1535+
| `advancedFilterValueDropdownIconColor` | Customize the background color of the advanced filter value dropdown icon using the [SfDataGridThemeData.advancedFilterValueDropdownIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterValueDropdownIconColor.html) property. |
1536+
| `advancedFilterValueTextAreaCursorColor` | The cursor color in the advanced filter value text area can be customized using the [SfDataGridThemeData.advancedFilterValueTextAreaCursorColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/advancedFilterValueTextAreaCursorColor.html) property. |
1537+
| `andRadioActiveColor` | The active (selected) color of the "AND" radio button in the advanced filter can be customized using the [SfDataGridThemeData.andRadioActiveColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/andRadioActiveColor.html) property. |
1538+
| `andRadioFillColor` | The fill color of the "AND" radio button in the advanced filter can be customized using the [SfDataGridThemeData.andRadioFillColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/andRadioFillColor.html) property. |
1539+
| `appBarBottomBorderColor` | You can customize the color of the bottom border of the AppBar by using the [SfDataGridThemeData.appBarBottomBorderColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/appBarBottomBorderColor.html) property. |
1540+
| `calendarIconColor` | The color of the calendar icon in the filter popup menu can be customized using the [SfDataGridThemeData.calendarIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/calendarIconColor.html) property. |
1541+
| `cancelFilteringLabelButtonColor` | The color of the cancel button in the filter popup can be customized using the [SfDataGridThemeData.cancelFilteringLabelButtonColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/cancelFilteringLabelButtonColor.html) property. |
1542+
| `cancelFilteringLabelColor` | You can customize the color of the cancel label text in the filter popup menu by using the [SfDataGridThemeData.cancelFilteringLabelColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/cancelFilteringLabelColor.html) property. |
1543+
| `captionSummaryRowColor` | The background color of the caption summary row in the `SfDataGrid` can be customized using the [SfDataGridThemeData.captionSummaryRowColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/captionSummaryRowColor.html) property. |
1544+
| `caseSensitiveIconActiveColor` | The active (selected) color of the case-sensitive icon in the filter popup menu can be customized using the [SfDataGridThemeData.caseSensitiveIconActiveColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/caseSensitiveIconActiveColor.html) property. |
1545+
| `caseSensitiveIconColor` | The default color of the case-sensitive icon in the filter popup menu can be customized using the [SfDataGridThemeData.caseSensitiveIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/caseSensitiveIconColor.html) property. |
1546+
| `closeIconColor` | The color of the close icon, which is used to clear the input text in the search area of the filter popup's TextField, can be customized using the [SfDataGridThemeData.closeIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/closeIconColor.html) property. |
1547+
| `filterPopupBackgroundColor` | You can customize the background color of the filter popup menu by using the [SfDataGridThemeData.filterPopupBackgroundColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupBackgroundColor.html) property. |
1548+
| `filterPopupBottomDividerColor` | The [SfDataGridThemeData.filterPopupBottomDividerColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupBottomDividerColor.html) property allows you to define a custom color for the bottom divider in the filter popup, helping to match your application's theme. |
1549+
| `filterPopupCheckColor` | The checkmark color of the checkbox in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupCheckColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupCheckColor.html) property. |
1550+
| `filterPopupCheckboxFillColor` | You can customize the fill color of checkboxes within the filter popup menu by using the [SfDataGridThemeData.filterPopupCheckboxFillColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupCheckboxFillColor.html) property. |
1551+
| `filterPopupDisabledIconColor` | Use the [SfDataGridThemeData.filterPopupDisabledIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupDisabledIconColor.html) property to define a custom color for disabled icons in the filter popup menu. |
1552+
| `filterPopupIconColor` | The color of icons displayed in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupIconColor.html) property. |
1553+
| `filterPopupInputBorderColor` | You can customize the border color of the input field in the filter popup menu by using the [SfDataGridThemeData.filterPopupInputBorderColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupInputBorderColor.html) property. |
1554+
| `filterPopupTopDividerColor` | The color of the top divider in the filter popup menu can be customized using the [SfDataGridThemeData.filterPopupTopDividerColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/filterPopupTopDividerColor.html) property. |
1555+
| `noMatchesFilteringLabelColor` | The color of the 'No Matches' label, displayed when no results are found in the filter popup menu, can be customized using the [SfDataGridThemeData.noMatchesFilteringLabelColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/noMatchesFilteringLabelColor.html) property. |
1556+
| `okFilteringLabelButtonColor` | The color of the OK button in the filter popup menu can be customized using the [SfDataGridThemeData.okFilteringLabelButtonColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/okFilteringLabelButtonColor.html) property. |
1557+
| `okFilteringLabelColor` | You can customize the color of the OK label text in the filter popup menu by using the [SfDataGridThemeData.okFilteringLabelColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/okFilteringLabelColor.html) property |
1558+
| `okFilteringLabelDisabledButtonColor` | The color of the disabled OK button in the filter popup menu can be customized using the [SfDataGridThemeData.okFilteringLabelDisabledButtonColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/okFilteringLabelDisabledButtonColor.html) property |
1559+
| `orRadioActiveColor` | The active (selected) color of the 'OR' radio button in the advanced filter can be customized using the [SfDataGridThemeData.orRadioActiveColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/orRadioActiveColor.html) property. |
1560+
| `orRadioFillColor` | The fill color of the 'OR' radio button in the advanced filter can be customized using the [SfDataGridThemeData.orRadioFillColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/orRadioFillColor.html) property. |
1561+
| `searchAreaCursorColor` | The cursor color in the search area of the filter popup menu can be customized using the [SfDataGridThemeData.searchAreaCursorColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/searchAreaCursorColor.html) property. |
1562+
| `searchAreaFocusedBorderColor` | Use the [SfDataGridThemeData.searchAreaFocusedBorderColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/searchAreaFocusedBorderColor.html) property to define the focused border color of the search area in the filter popup menu |
1563+
| `searchIconColor` | The color of the search icon in the search area of the filter popup menu can be customized using the [SfDataGridThemeData.searchIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/searchIconColor.html) property. |
15641564

15651565
> **NOTE**
15661566
The `cancelFilteringLabelColor`, `filterPopupBottomDividerColor`, and `okFilteringLabelColor` properties are supported only on desktop platforms.

0 commit comments

Comments
 (0)