Updating bwu_grid dataItems in realtime and deleting a selected row

Question

I am using bwu_datagrid in my project and finding it difficult to solve two issues.

1. How to delete a row selected via a checkbox in a grid using a context menu that shows delete with an icon and words.

2. Updating the grid dataItems in realtime. From previous discussions I have seen where editor.commitChanges() needs to be called but I have not been successful in doing so. As a matter of fact my code containing the commitChanges() method throws an error that the method cannot be found. I suspect I might be using it incorrectly.

If possible, I would appreciate the entire corrected code for the .dart file.

.dart

import 'dart:html';
import 'package:polymer/polymer.dart';

//import 'package:epimss_clerking/epimss_clerking.dart';
//import 'package:epimss_shared/epimss_shared.dart';
//import 'package:epimss_shared/epimss_shared_import_ui.dart';

import 'package:bwu_datagrid/bwu_datagrid.dart';
//import 'package:bwu_datagrid/components/bwu_column_picker/bwu_column_picker.dart';
import 'package:bwu_datagrid/datagrid/helpers.dart';
//import 'package:bwu_datagrid/plugins/cell_selection_model.dart';
import 'package:bwu_datagrid/plugins/checkbox_select_column.dart';
import 'package:bwu_datagrid/editors/editors.dart';
import 'package:bwu_datagrid/formatters/formatters.dart';
import 'package:bwu_datagrid/plugins/row_selection_model.dart';
import 'package:bwu_datagrid/core/core.dart';
//import 'package:bwu_datagrid/editors/editors.dart';

@CustomTag('medication-mediators-form')
class MedicationMediatorsForm extends PolymerElement {
  @observable String type = '';
  String topic = '';

  BwuDatagrid grid;
  List<Column> columns = <Column>[];

  var gridOptions = new GridOptions(
      editable: true,
      enableAddRow: true,
      enableCellNavigation: true,
      asyncEditorLoading: false,
      autoEdit: true,
      autoHeight: true);

  List<MapDataItem> _dataItems = <MapDataItem>[];
  MapDataItemProvider dataItemsProvider;
  CheckboxSelectColumn checkboxColumn =
      new CheckboxSelectColumn(cssClass: 'bwu-datagrid-cell-checkboxsel');

  @published
  String get color => readValue(#color);
  set color(String value) => writeValue(#color, value);

  MedicationMediatorsForm.created() : super.created() {
    dataItemsProvider = new MapDataItemProvider(_dataItems);

    columns.add(checkboxColumn);
    columns
      ..add(new Column(
          name: 'Medication',
          id: 'medication',
          field: 'medication',
          editor: new TextEditor(),
          //validator: new Bwu_RequiredNounValidator(),
          sortable: true, minWidth: 100))
      ..add(new Column(
          name: 'Precipitant',
          id: 'precipitant',
          field: 'precipitant',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 50))
      ..add(new Column(
          name: 'Reliever',
          id: 'reliever',
          field: 'reliever',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 50))
      ..add(new Column(
          name: 'Exacerbator',
          id: 'exacerbator',
          field: 'exacerbator',
          editor: new CheckboxEditor(),
          formatter: new CheckmarkFormatter(),
          minWidth: 60));
  }

  void onMouseOutFired() {
    //grid.getEditController.commitCurrentEdit; //commitChanges();
    grid.deliverChanges();
    print('changes delivered');
  }

  @override
  void attached() {
    super.attached();
    topic = this.dataset['topic'];

    try {
      grid = $['grid'];

      grid
          .setup(
              dataProvider: dataItemsProvider,
              columns: columns,
              gridOptions: gridOptions)
          .then((_) {
        //grid.setSelectionModel = new CellSelectionModel();
        grid.setSelectionModel = (new RowSelectionModel(
            new RowSelectionModelOptions(selectActiveRow: false)));
        grid.registerPlugin(checkboxColumn);
        grid.onBwuAddNewRow.listen(addNewRowHandler);
        grid.onBwuCellChange.listen(onCellChangeHandler);
        grid.onBwuMouseLeave.listen(onBwuMouseLeaveHandler);
      });
    } on NoSuchMethodError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } on RangeError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } on TypeError catch (e) {
      print('$e\n\n${e.stackTrace}');
    } catch (e) {
      print('$e');
    }
  }

  void enableAutoEdit(MouseEvent e, dynamic details, HtmlElement target) {
    grid.setGridOptions = new GridOptions.unitialized()..autoEdit = true;
  }

  void disableAutoEdit(MouseEvent e, dynamic details, HtmlElement target) {
    grid.setGridOptions = new GridOptions.unitialized()..autoEdit = false;
  }

  void onBwuMouseLeaveHandler(MouseLeave e) {
    ///ERROR GENERATED THAT commitChanges CANNOT BE FOUND
    grid.getCellEditor().commitChanges();

    //_dataItems does not update in realtime -
    print(_dataItems);

    print('property changes delivered');
  }

  void onCellChangeHandler(CellChange e) {
    //print(_dataItems);

    _dataItems.forEach((MapDataItem item) {
      item.forEach((String key, dynamic value) {
        if (value == '') {
          print(key);
        }
      });
    });

    //eventBus.signal(new DaataEvent(_dataItems)..topic = this.topic);
  }

  void addNewRowHandler(AddNewRow e) {
    var item = e.item;
    grid.invalidateRow(dataItemsProvider.items.length);
    dataItemsProvider.items.add(item);
    grid.updateRowCount();
    grid.render();
  }
}

.html

<!DOCTYPE html>

<link href='../../../../packages/bwu_datagrid/bwu_datagrid.html' rel='import'>

<polymer-element name='medication-mediators-form'>

  <template>

    <style>#grid {width: 380px; height: 400px;}</style>

    <div layout vertical center color='{{color}}'>
      <bwu-datagrid id='grid' class='margin-5-lr'></bwu-datagrid>        
   </div>
  </template>
  <script type='application/dart' src='medication_mediators_form.dart'></script>
</polymer-element>

Answer 1

I'm not sure how you want to do it with a checkbox and a context menu.

Here is an example
- how a context menu can be implemented
- how to select rows using a checkbox

Deleting rows can be done like

var selectedRows = grid.getSelectedRows();

List<core.ItemBase> rowsToDelete = <core.ItemBase>[];
selectedRows.forEach((r) {
  rowsToDelete.add(data.items[r]);
});
rowsToDelete.forEach((r) => data.items.remove(r));

grid.invalidate();
grid.render();