bosskmk / pluto_grid

PlutoGrid is a dataGrid for flutter that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

Home Page:https://pluto.weblaze.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Help] Inline editing date, time or select column

antiv opened this issue · comments

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?