Improved Grid widget

Grid widget now supports custom toolbar
Remove row is triggered as "data changed"

modules/backend/widgets/Grid.php

@@ -100,10 +100,10 @@ class Grid extends WidgetBase
      */
     public function prepareVars()
     {
+        $this->vars['toolbarWidget'] = $this->makeToolbarWidget();
         $this->vars['columnHeaders'] = $this->getColumnHeaders();
         $this->vars['columnDefinitions'] = $this->getColumnDefinitions();
         $this->vars['columnWidths'] = $this->getColumnWidths();
-        $this->vars['toolbarWidget'] = $this->makeToolbarWidget();
 
         $this->vars['showHeader'] = $this->showHeader;
         $this->vars['allowInsert'] = $this->allowInsert;
@@ -120,12 +120,14 @@ class Grid extends WidgetBase
         if ($this->disableToolbar)
             return;
 
-        $toolbarConfig = $this->makeConfig([
-            'alias'   => $this->alias . 'Toolbar',
+        $defaultConfig = [
             'buttons' => $this->getViewPath('_toolbar.htm'),
-        ]);
+        ];
+        $toolbarConfig = $this->makeConfig($this->getConfig('toolbar', $defaultConfig));
+        $toolbarConfig->alias = $this->alias . 'Toolbar';
 
         $toolbarWidget = $this->makeWidget('Backend\Widgets\Toolbar', $toolbarConfig);
+        $toolbarWidget->vars['gridWidget'] = $this;
         $toolbarWidget->vars['allowInsert'] = $this->allowInsert;
         $toolbarWidget->vars['allowRemove'] = $this->allowRemove;
         return $toolbarWidget;
@@ -153,8 +155,15 @@ class Grid extends WidgetBase
          * Changes array, each array item will contain:
          * ['rowData' => [...], 'keyName' => 'changedColumn', 'oldValue' => 'was', 'newValue' => 'is']
          */
-        $changes = post('changes');
-        $this->fireEvent('grid.dataChanged', [$changes]);
+        $changes = post('grid_changes');
+
+        /*
+         * Action will be either:
+         * "remove", "alter", "empty", "edit", "populateFromArray", "autofill", "paste"
+         */
+        $action = post('grid_action');
+
+        $this->fireEvent('grid.dataChanged', [$action, $changes]);
     }
 
     public function onDataSource()

modules/backend/widgets/grid/assets/js/datagrid.js

@@ -55,7 +55,7 @@
                  *           [ [row, prop, oldVal, newVal], ... ].
                  *
                  * source  - is one of the strings: "alter", "empty", "edit", "populateFromArray",
-                 *           "loadData", "autofill", "paste".
+                 *           "loadData", "autofill", "paste", "remove".
                  */
                 self.$el.trigger('datagrid.change', [changes, source])
             },
@@ -87,7 +87,7 @@
              * Event to update the data locker
              */
             this.$dataLocker = $(this.options.dataLocker)
-            self.$el.on('datagrid.change', function(event, eventData) {
+            self.$el.on('datagrid.change', function(event) {
                 if (!self.gridInstance) return
                 self.$dataLocker.val(JSON.stringify(self.getData()))
             })
@@ -125,7 +125,7 @@
 
                 if (changeData.length > 0) {
                     self.$el.request(self.options.changeHandler, {
-                        data: { changes: changeData }
+                        data: { grid_action: source, grid_changes: changeData }
                     })
                 }
             })
@@ -279,6 +279,9 @@
         if (!index && index !== 0)
             return
 
+        var changes = [[index, null, null, 'DELETE']]
+        this.$el.trigger('datagrid.change', [changes, 'remove'])
+
         this.gridInstance.alter('remove_row', index)
         this.updateUi()
     }
@@ -437,7 +440,7 @@
                     $el.append($btn);
 
                     $btn.on('mouseup', function () {
-                        instance.alter("remove_row", row);
+                        instance.rootElement.dataGrid('removeRow', row)
                         $(window).trigger('oc.updateUi')
                     });
                 }

modules/backend/widgets/grid/partials/_button_delete.htm

@@ -0,0 +1,6 @@
+<a
+    href="javascript:;"
+    class="btn btn-sm btn-default oc-icon-minus-square"
+    onclick="$(this).closest('.datagrid-widget').find('[data-control=datagrid]').dataGrid('removeRow')">
+    Delete Row
+</a>

modules/backend/widgets/grid/partials/_button_insert.htm

@@ -0,0 +1,6 @@
+<a
+    href="javascript:;"
+    class="btn btn-sm btn-default oc-icon-plus-square"
+    onclick="$(this).closest('.datagrid-widget').find('[data-control=datagrid]').dataGrid('insertRow')">
+    Insert Row
+</a>

modules/backend/widgets/grid/partials/_toolbar.htm

@@ -1,19 +1,9 @@
 <div data-control="toolbar">
     <?php if ($allowInsert): ?>
-        <a
-            href="javascript:;"
-            class="btn btn-sm btn-default oc-icon-plus-square"
-            onclick="$(this).closest('.datagrid-widget').find('[data-control=datagrid]').dataGrid('insertRow')">
-            Insert Row
-        </a>
+        <?= $gridWidget->makePartial('button_insert') ?>
     <?php endif ?>
     <?php if ($allowRemove): ?>
-        <a
-            href="javascript:;"
-            class="btn btn-sm btn-default oc-icon-minus-square"
-            onclick="$(this).closest('.datagrid-widget').find('[data-control=datagrid]').dataGrid('removeRow')">
-            Delete Row
-        </a>
+        <?= $gridWidget->makePartial('button_delete') ?>
     <?php endif ?>
     <!-- <a href="#" class="btn btn-sm btn-default oc-icon-floppy-o">Save as CSV</a> -->
     <!-- <a href="#" class="btn btn-sm btn-default oc-icon-upload">Import CSV</a> -->