Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Help] Inline editing date, time or select column #1051

Open
antiv opened this issue Apr 29, 2024 · 0 comments
Open

[Help] Inline editing date, time or select column #1051

antiv opened this issue Apr 29, 2024 · 0 comments
Labels
question Further information is requested

Comments

@antiv
Copy link

antiv commented Apr 29, 2024

I define my column as

PlutoColumn(
      title: 'To Date',
      field: 'to',
      type: PlutoColumnType.date(
        format: 'dd.MM.yyyy'
      ),
    ),

When I enter edit mode, with enter key,or click, and try to type, date picker popups and I can selected value, thats cool, but, is it possible to type date and change value, and show popup only if user select icon, or on some key.

So, user can type a date and select from picker if he wont.

Similar for other column types, as select, time ...

What I do is to set column as text, than use renderer to show value and my custom dropdown, but it is show dropdown when I'm in regular mode, and not show it in edit mode.
Eg, select column with true, false, unresolved:

PlutoColumn(
      title: 'Approved',
      field: 'approved',
      type: PlutoColumnType.text(),
      formatter: (value) {
        if (value == 'true') {
          return 'true';
        } else if (value == 'false') {
          return 'false';
        }
        return 'unresolved';
      },
      hide: false,
      width: 120,
      applyFormatterInEditing: true,
      renderer: (PlutoColumnRendererContext rendererContext) {
        if (rendererContext.row.type.isGroup) {
          return const Text('');
        }
        final bool isTrue = rendererContext.cell.value == true || rendererContext.cell.value == 'true';
        final bool isFalse = rendererContext.cell.value == false || rendererContext.cell.value == 'false';
        return Row(
          children: [
            RepaintBoundary(child: Icon(
              isTrue ? Icons.check : isFalse ? Icons.close : Icons.do_not_disturb_on_outlined,
              color: isTrue ? Colors.green : isFalse ? Colors.red : Colors.grey,
            )),
            const SizedBox(width: 8),
            /// Dropdown for editing
            PopupMenuButton<String>(
              icon: const Icon(Icons.arrow_drop_down),
              onSelected: (String value) {
                /// fire PlutoGridOnChangeEvent
                rendererContext.stateManager.changeCellValue(rendererContext.cell, value);
                rendererContext.stateManager.notifyListeners();
              },
              itemBuilder: (BuildContext context) {
                return ['true', 'false', 'unresolved'].map((String choice) {
                  return PopupMenuItem<String>(
                    value: choice,
                    child: Row(
                      children: [
                        Icon(
                          choice == 'true' ? Icons.check : choice == 'false' ? Icons.close : Icons.do_not_disturb_on_outlined,
                          color: choice == 'true' ? Colors.green : choice == 'false' ? Colors.red : Colors.grey,
                        ),
                        Text(choice),
                      ],
                    ),
                  );
                }).toList();
              },
            ),
          ],
        );
      },
    )

Can I show my custom dropdown in editing mode, or activate inline editing without required popup in columns with this types?

@antiv antiv added the question Further information is requested label Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant