diff --git a/modules/backend/formwidgets/DataGrid.php b/modules/backend/formwidgets/DataGrid.php
index 7a283fd5f..b0e01932f 100644
--- a/modules/backend/formwidgets/DataGrid.php
+++ b/modules/backend/formwidgets/DataGrid.php
@@ -53,7 +53,7 @@ class DataGrid extends FormWidgetBase
$this->vars['columnHeaders'] = $this->getColumnHeaders();
$this->vars['columnDefinitions'] = $this->getColumnDefinitions();
$this->vars['columnWidths'] = $this->getColumnWidths();
- $this->vars['minRows'] = $this->getMinRows();
+ $this->vars['size'] = $this->size;
$this->vars['toolbarWidget'] = $this->makeToolbarWidget();
}
@@ -68,17 +68,6 @@ class DataGrid extends FormWidgetBase
return $toolbarWidget;
}
- protected function getMinRows()
- {
- switch ($this->size) {
- case 'tiny': return 2;
- case 'small': return 4;
- case 'large': return 6;
- case 'huge': return 8;
- case 'giant': return 10;
- }
- }
-
protected function getColumnHeaders()
{
$headers = [];
diff --git a/modules/backend/formwidgets/datagrid/assets/css/datagrid.css b/modules/backend/formwidgets/datagrid/assets/css/datagrid.css
new file mode 100644
index 000000000..b1e65457c
--- /dev/null
+++ b/modules/backend/formwidgets/datagrid/assets/css/datagrid.css
@@ -0,0 +1,21 @@
+.field-datagrid.size-tiny .control-datagrid {
+ min-height: 50px;
+}
+.field-datagrid.size-small .control-datagrid {
+ min-height: 100px;
+}
+.field-datagrid.size-large .control-datagrid {
+ min-height: 200px;
+}
+.field-datagrid.size-huge .control-datagrid {
+ min-height: 250px;
+}
+.field-datagrid.size-giant .control-datagrid {
+ min-height: 350px;
+}
+.field-datagrid .control-datagrid {
+ background: #eeeeee;
+}
+.field-datagrid .control-datagrid table thead th {
+ background-color: #fafafa;
+}
diff --git a/modules/backend/formwidgets/datagrid/assets/js/datagrid.js b/modules/backend/formwidgets/datagrid/assets/js/datagrid.js
index 38527d726..f6353ca9b 100644
--- a/modules/backend/formwidgets/datagrid/assets/js/datagrid.js
+++ b/modules/backend/formwidgets/datagrid/assets/js/datagrid.js
@@ -23,6 +23,7 @@
this.$el = $(element)
this.staticWidths = this.options.columnWidths
+ this.gridInstance = null
// Init
var handsontableOptions = {
@@ -30,9 +31,11 @@
colWidths: function(columnIndex) {
return self.staticWidths[columnIndex]
},
+ height: 400,
columns: this.options.columns,
+ startRows: this.options.startRows,
minRows: this.options.minRows,
- minSpareRows: 1,
+ // minSpareRows: 1,
currentRowClassName: 'currentRow',
// rowHeaders: true,
// manualColumnMove: true,
@@ -42,15 +45,15 @@
removeRowPlugin: true
}
-
this.$el.handsontable(handsontableOptions)
+ this.gridInstance = this.$el.handsontable('getInstance')
this.staticWidths = this.calculateColumnWidths()
- self.$el.handsontable('render')
+ self.gridInstance.render()
$(window).on('oc.updateUi', function(){
self.staticWidths = self.calculateColumnWidths()
- self.$el.handsontable('render')
+ self.gridInstance.render()
})
$(window).on('resize', function(){
@@ -59,10 +62,38 @@
}
DataGrid.DEFAULTS = {
- minRows: null,
+ startRows: 1,
+ minRows: 1,
columnHeaders: null,
columnWidths: null,
- columns: null
+ columns: null,
+ confirmMessage: 'Are you sure?'
+ }
+
+ DataGrid.prototype.getData = function() {
+ return this.$el.handsontable('getData')
+ }
+
+ DataGrid.prototype.insertRow = function(index) {
+ this.alterRow(index, 'insert_row')
+ }
+
+ DataGrid.prototype.removeRow = function(index) {
+ if (!confirm(this.options.confirmMessage))
+ return
+
+ this.alterRow(index, 'remove_row')
+ }
+
+ DataGrid.prototype.alterRow = function(index, command) {
+ if (!index) {
+ var selectedArr = this.gridInstance.getSelected()
+ if (selectedArr && selectedArr.length > 0)
+ index = selectedArr[0]
+ }
+
+ if (index === 0 || index)
+ this.gridInstance.alter(command, index)
}
DataGrid.prototype.calculateColumnWidths = function() {
@@ -88,7 +119,7 @@
if (this > 0) {
staticWidths.push(this)
} else {
- var remainingWidth = ((totalWidth - headerOffsetWidth - usedWidth) / unsetWidthCounts) - 2
+ var remainingWidth = ((totalWidth - headerOffsetWidth - usedWidth) / unsetWidthCounts) - 1
staticWidths.push(Math.max(remainingWidth, 100))
}
})
@@ -175,7 +206,6 @@
}
}
-
Handsontable.PluginHooks.add('beforeInitWalkontable', function (walkontableConfig) {
var instance = this;
diff --git a/modules/backend/formwidgets/datagrid/assets/less/datagrid.less b/modules/backend/formwidgets/datagrid/assets/less/datagrid.less
new file mode 100644
index 000000000..1e226dbc8
--- /dev/null
+++ b/modules/backend/formwidgets/datagrid/assets/less/datagrid.less
@@ -0,0 +1,21 @@
+@import "../../../../assets/less/core/boot.less";
+
+@color-datagrid-body-bg: #eeeeee;
+
+.field-datagrid {
+
+ &.size-tiny .control-datagrid { min-height: @size-tiny; }
+ &.size-small .control-datagrid { min-height: @size-small; }
+ &.size-large .control-datagrid { min-height: @size-large; }
+ &.size-huge .control-datagrid { min-height: @size-huge; }
+ &.size-giant .control-datagrid { min-height: @size-giant; }
+
+ .control-datagrid {
+ background: @color-datagrid-body-bg;
+
+ table thead th {
+ background-color: @color-body-bg;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less b/modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less
index f51c109bd..7d297cb7f 100644
--- a/modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less
+++ b/modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less
@@ -224,7 +224,7 @@
cursor: pointer;
}
- &.htRemoveRow {
+ &.htRemoveRow {
th.htRemoveRow {
text-align: center;
.btn {
diff --git a/modules/backend/formwidgets/datagrid/partials/_datagrid.htm b/modules/backend/formwidgets/datagrid/partials/_datagrid.htm
index 2310c53f9..edec1edb1 100644
--- a/modules/backend/formwidgets/datagrid/partials/_datagrid.htm
+++ b/modules/backend/formwidgets/datagrid/partials/_datagrid.htm
@@ -1,14 +1,19 @@
-
-render() ?>
-
+ class="field-datagrid size-">
+
+ render() ?>
+
+
+