Skip to content

Commit 7c543c3

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1241 from syncfusion-content/FLUT-958400-FilterPopup
FLUT-958400 - [Others] New Features UG
2 parents 9cc7eea + a1e5054 commit 7c543c3

File tree

2 files changed

+134
-3
lines changed

2 files changed

+134
-3
lines changed

‎Flutter/datagrid/filtering.md‎

Lines changed: 134 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,7 +1376,7 @@ import 'package:syncfusion_flutter_core/theme.dart';
13761376

13771377
## Show the filter icon when hovering the header cell
13781378

1379-
To show a filter icon when the mouse hovers over a column header in a DataGrid, set the [SfDataGrid.showFilterIconOnHover](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showFilterIconOnHover.html) property to true. Note that this feature is only available on web and desktop platforms
1379+
To show a filter icon when the mouse hovers over a column header in a DataGrid, set the [SfDataGrid.showColumnHeaderIconOnHover](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showColumnHeaderIconOnHover.html) property to true. Note that this feature is only available on web and desktop platforms
13801380

13811381
{% tabs %}
13821382
{% highlight Dart %}
@@ -1390,7 +1390,7 @@ To show a filter icon when the mouse hovers over a column header in a DataGrid,
13901390
body: SfDataGrid(
13911391
source: employeeDataSource,
13921392
allowFiltering: true,
1393-
showFilterIconOnHover:true,
1393+
showColumnHeaderIconOnHover:true,
13941394
headerGridLinesVisibility: GridLinesVisibility.both,
13951395
gridLinesVisibility: GridLinesVisibility.both,
13961396
columnWidthMode: ColumnWidthMode.auto,
@@ -1435,7 +1435,7 @@ To show a filter icon when the mouse hovers over a column header in a DataGrid,
14351435
<img alt="flutter datagrid shows filter icon when hover the header cell" src="images/filtering/flutter-datagrid-show-filter-icon-on-hover.gif"/>
14361436

14371437
## Perform filtering to the user-defined type
1438-
By default, the `FilterBehavior.strongDataType` applies to the num, string, and DateTime types. Now, it also applies to the user-defined types also. It can be enabled by extending the user-defined type with the [Comparable](https://api.dart.dev/stable/3.3.1/dart-core/Comparable-class.html) class.
1438+
By default, the `FilterBehavior.strongDataType` applies to numeric, String, and DateTime types. Now, it also applies to the user-defined types also. It can be enabled by extending the user-defined type with the [Comparable](https://api.dart.dev/stable/3.3.1/dart-core/Comparable-class.html) class.
14391439

14401440
{% tabs %}
14411441
{% highlight Dart %}
@@ -1515,3 +1515,134 @@ By default, the `FilterBehavior.strongDataType` applies to the num, string, and
15151515

15161516
{% endhighlight %}
15171517
{% endtabs %}
1518+
1519+
## Customize appearance of Filter Popup Menu
1520+
1521+
The `SfDataGrid` provides complete color customization support for the filter popup menu, allowing you to personalize its appearance and enhance its visual appeal.
1522+
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.
1524+
1525+
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.
1526+
1527+
1528+
| Properties | Description |
1529+
|---------------------------|-----------------------------------------------------|
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. |
1564+
|
1565+
1566+
> **NOTE**
1567+
The `cancelFilteringLabelColor`, `filterPopupBottomDividerColor`, and `okFilteringLabelColor` properties are supported only on desktop platforms.
1568+
1569+
The following example shows how to customize the filter popup menu using properties from `SfDataGridTheme`, such as `cancelFilteringLabelButtonColor`, `cancelFilteringLabelColor`, `okFilteringLabelButtonColor`, `okFilteringLabelColor`, `filterPopupCheckboxFillColor`, and `filterPopupDisabledIconColor`.
1570+
1571+
{% tabs %}
1572+
{% highlight Dart %}
1573+
1574+
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
1575+
import 'package:syncfusion_flutter_core/theme.dart';
1576+
1577+
@override
1578+
Widget build(BuildContext context) {
1579+
return Scaffold(
1580+
appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
1581+
body: SfDataGridTheme(
1582+
data: SfDataGridThemeData(
1583+
filterPopupCheckboxFillColor:
1584+
WidgetStatePropertyAll(Colors.green[400]),
1585+
filterPopupDisabledIconColor: Colors.teal[400],
1586+
okFilteringLabelColor: Colors.white,
1587+
okFilteringLabelButtonColor: Colors.indigo[600],
1588+
cancelFilteringLabelColor: Colors.black,
1589+
cancelFilteringLabelButtonColor: Colors.blueGrey[200]
1590+
),
1591+
child: SfDataGrid(
1592+
source: employeeDataSource,
1593+
allowFiltering: true,
1594+
columnWidthMode: ColumnWidthMode.fill,
1595+
columns: <GridColumn>[
1596+
GridColumn(
1597+
columnName: 'id',
1598+
label: Container(
1599+
padding: EdgeInsets.all(16.0),
1600+
alignment: Alignment.centerRight,
1601+
child: Text('ID'),
1602+
),
1603+
),
1604+
GridColumn(
1605+
columnName: 'name',
1606+
label: Container(
1607+
padding: EdgeInsets.all(8.0),
1608+
alignment: Alignment.centerLeft,
1609+
child: Text('Name'),
1610+
),
1611+
),
1612+
GridColumn(
1613+
columnName: 'designation',
1614+
label: Container(
1615+
padding: EdgeInsets.all(8.0),
1616+
alignment: Alignment.centerLeft,
1617+
child: Text('Designation', overflow: TextOverflow.ellipsis),
1618+
),
1619+
),
1620+
GridColumn(
1621+
columnName: 'location',
1622+
label: Container(
1623+
padding: EdgeInsets.all(8.0),
1624+
alignment: Alignment.centerLeft,
1625+
child: Text('Location', overflow: TextOverflow.ellipsis),
1626+
),
1627+
),
1628+
GridColumn(
1629+
columnName: 'salary',
1630+
label: Container(
1631+
padding: EdgeInsets.all(8.0),
1632+
alignment: Alignment.centerRight,
1633+
child: Text('Salary'),
1634+
),
1635+
),
1636+
],
1637+
),
1638+
),
1639+
);
1640+
}
1641+
1642+
{% endhighlight %}
1643+
{% endtabs %}
1644+
1645+
<img alt="flutter datagrid shows filter popup menu with customized colors" src="images/filtering/flutter-datagrid-customized-filter-popup-menu.png" width="689"/>
1646+
1647+
1648+

‎Flutter/datagrid/images/filtering/flutter-datagrid-customized-filter-popup-menu.png‎

28.8 KB
Loading

0 commit comments

Comments
 (0)