Filter PlutoGrid data using API Request

[sagar-sachdev-speridian]

Is it possible to read all the columns assigned value we set on pluto grid popup filter ? I have a requirement where i need to call api once user sets filter values for different columns ? @bosskmk

[bosskmk]

Here is some sample code. This will give you the answer you are looking for.

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

import '../../dummy_data/development.dart';
import '../../widget/pluto_example_button.dart';
import '../../widget/pluto_example_screen.dart';

class ColumnFilteringScreen extends StatefulWidget {
  static const routeName = 'feature/column-filtering';

  @override
  _ColumnFilteringScreenState createState() => _ColumnFilteringScreenState();
}

class _ColumnFilteringScreenState extends State<ColumnFilteringScreen> {
  List<PlutoColumn>? columns;

  List<PlutoRow>? rows;

  late PlutoGridStateManager stateManager;

  @override
  void initState() {
    super.initState();

    columns = [
      PlutoColumn(
        title: 'Text',
        field: 'text',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'Number',
        field: 'number',
        type: PlutoColumnType.number(),
      ),
      PlutoColumn(
        title: 'Date',
        field: 'date',
        type: PlutoColumnType.date(),
      ),
      PlutoColumn(
        title: 'Disable',
        field: 'disable',
        type: PlutoColumnType.text(),
        enableFilterMenuItem: false,
      ),
      PlutoColumn(
        title: 'Select',
        field: 'select',
        type: PlutoColumnType.select(<String>['A', 'B', 'C', 'D', 'E', 'F']),
      ),
    ];

    rows = DummyData.rowsByColumns(length: 30, columns: columns);
  }

  List<PlutoColumn> getFilteredColumns() {
    return stateManager.refColumns!.where((e) {
      return stateManager.isFilteredColumn(e);
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return PlutoExampleScreen(
      title: 'Column filtering',
      topTitle: 'Column filtering',
      topContents: [
        const Text('Filter rows by setting filters on columns.'),
        const SizedBox(
          height: 10,
        ),
        const Text(
            'Select the SetFilter menu from the menu that appears when you tap the icon on the right of the column'),
        const Text(
            'If the filter is set to all or complex conditions, TextField under the column is deactivated.'),
        const Text(
            'Also, like the Disable column, if enableFilterMenuItem is false, it is excluded from all column filtering conditions.'),
        const Text(
            'In the case of the Select column, it is a custom filter that can filter multiple filters with commas. (ex: a,b,c)'),
        const SizedBox(
          height: 10,
        ),
        const Text('Check out the source to add custom filters.'),
      ],
      topButtons: [
        PlutoExampleButton(
          url:
              'https://github.com/bosskmk/pluto_grid/blob/master/example/lib/screen/feature/column_filtering_screen.dart',
        ),
      ],
      body: PlutoGrid(
        columns: columns,
        rows: rows,
        createHeader: (s) {
          return Row(
            children: [
              ElevatedButton(
                onPressed: () {
                  print(getFilteredColumns());
                },
                child: const Text('Get filtered columns'),
              )
            ],
          );
        },
        onLoaded: (PlutoGridOnLoadedEvent event) {
          stateManager = event.stateManager!;

          stateManager.setShowColumnFilter(true);

          stateManager.eventManager!.listener((event) {
            if (event is PlutoGridChangeColumnFilterEvent) {
              print('Changed filter value');
              print(event.column!.title);
              print(event.filterType);
              print(event.filterValue);

              print('Previous filters');
              print(getFilteredColumns());
            }
          });
        },
        onChanged: (PlutoGridOnChangedEvent event) {
          print(event);
        },
        configuration: PlutoGridConfiguration(
          /// If columnFilterConfig is not set, the default setting is applied.
          ///
          /// Return the value returned by resolveDefaultColumnFilter through the resolver function.
          /// Prevents errors returning filters that are not in the filters list.
          columnFilterConfig: PlutoGridColumnFilterConfig(
            filters: const [
              ...FilterHelper.defaultFilters,
              // custom filter
              ClassYouImplemented(),
            ],
            resolveDefaultColumnFilter: (column, resolver) {
              if (column.field == 'text') {
                return resolver<PlutoFilterTypeContains>() as PlutoFilterType;
              } else if (column.field == 'number') {
                return resolver<PlutoFilterTypeGreaterThan>()
                    as PlutoFilterType;
              } else if (column.field == 'date') {
                return resolver<PlutoFilterTypeLessThan>() as PlutoFilterType;
              } else if (column.field == 'select') {
                return resolver<ClassYouImplemented>() as PlutoFilterType;
              }

              return resolver<PlutoFilterTypeContains>() as PlutoFilterType;
            },
          ),
        ),
      ),
    );
  }
}

class ClassYouImplemented implements PlutoFilterType {
  String get title => 'Custom contains';

  get compare => ({
        required String? base,
        required String? search,
        required PlutoColumn? column,
      }) {
        var keys = search!.split(',').map((e) => e.toUpperCase()).toList();

        return keys.contains(base!.toUpperCase());
      };

  const ClassYouImplemented();
}

[sagars-sachdev98]

thanks this is working & what about the set filter dialog can we also integrate it with api filter call?

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.