Merge pull request #8371 from infor-design/8198-datagrid-frozen-cols

8198 - Datagrid Frozen Column Prevent Reorder

app/views/components/datagrid/test-frozen-columns.html

@@ -0,0 +1,48 @@
+<div class="full-height full-width">
+  <div id="datagrid" class="datagrid">
+  </div>
+</div>
+
+<script>
+  $('body').one('initialized', function () {
+      var grid,
+        columns = [],
+        data = [];
+
+      var url = '{{basepath}}api/compressors?pageNum=1&pageSize=100';
+      $.getJSON(url, function(res) {
+        data = res.data;
+
+        // Define Columns for the Grid.
+        columns.push({ id: 'productId', reorderable: false, name: 'Product Id', field: 'productId', formatter: Soho.Formatters.Text});
+        // columns.push({ id: 'productName', name: 'Product Name', field: 'productName', formatter: Soho.Formatters.Hyperlink, href: 'http://www.google.com', target: '_blank'});
+        columns.push({ id: 'activity', name: 'Activity', field: 'activity'});
+        columns.push({ id: 'quantity', name: 'Quantity', field: 'quantity'});
+        // columns.push({ id: 'orderDate', name: 'Order Date', field: 'orderDate', formatter: Soho.Formatters.Date, dateFormat: 'M/d/yyyy'});
+        // columns.push({ id: 'price', align: 'right', name: 'Actual Price', field: 'price', formatter: Soho.Formatters.Decimal, numberFormat: {minimumFractionDigits: 0, maximumFractionDigits: 0, style: 'currency', currencySign: '$'}});
+        // columns.push({ id: 'status', name: 'Status', field: 'status', formatter: Soho.Formatters.Text});
+        // columns.push({ id: 'pumpLife', name: 'Pump Life', field: 'pumpLife'});
+        // columns.push({ id: 'ratedTemp', name: 'Temp. Rating', field: 'ratedTemp'});
+        // columns.push({ id: 'productSku', name: 'Sku', field: 'productSku'});
+        // columns.push({ id: 'action', name: 'Action', field: 'action'});
+        // columns.push({ id: 'rpm', name: 'Motor Rpm', field: 'rpm'});
+        // columns.push({ id: 'maxPressure', name: 'Max Pressure', field: 'maxPressure'});
+        // columns.push({ id: 'weight', name: 'Weight', field: 'weight'});
+        // columns.push({ id: 'actionButton', name: 'Button', field: '', text: 'Buy Now', align: 'center', sortable: false, formatter: Soho.Formatters.Button, click: function (e, args) {console.log('Button was clicked', args);}, width: 160, exportable: false});
+
+        // Init and get the api for the grid
+        $('#datagrid').datagrid({
+          columns: columns,
+          columnReorder: true,
+          dataset: data,
+          paging: true,
+          pagesize: 50,
+          frozenColumns: {
+            left: ['productId'],
+            // right: ['actionButton']
+          },
+          toolbar: {title: 'Compressors', actions: true, rowHeight: true, results: true, personalize: true, exportToExcel: true }
+        });
+      });
+  });
+</script>

docs/CHANGELOG.md

@@ -18,6 +18,7 @@
 - `[Cards]` Fixed title alignment for bordered and borderless. ([#8212](https://github.com/infor-design/enterprise/issues/8212))
 - `[Checkbox]` Fixed focus border style. ([#8015](https://github.com/infor-design/enterprise/issues/8015))
 - `[Contextual Action Panel]` Fixed alignments of searchfield icons in RTL. ([#8208](https://github.com/infor-design/enterprise/issues/8208))
+- `[Datagrid]` Fixed frozen columns getting out of sync when columnReorder is set to true. ([#8198](https://github.com/infor-design/enterprise/issues/8198))
 - `[Datagrid]` Replaced the toolbar with a flex toolbar for the editable example. ([#8093](https://github.com/infor-design/enterprise/issues/8093))
 - `[Datagrid]` Fixed Hyperlink Formatter cssClass string resolution. ([#8340](https://github.com/infor-design/enterprise/issues/8340))
 - `[Datagrid]` Fixed contextual toolbar auto hide when performing action. ([#8352](https://github.com/infor-design/enterprise/issues/8352))

src/components/datagrid/datagrid.js

@@ -3290,8 +3290,15 @@ Datagrid.prototype = {
                     target = self.draggableColumnTargets[n];
                   }
 
-                  target.el.addClass('is-over');
-                  showTarget.addClass('is-over');
+                  const columnName = target.el.siblings('.datagrid-column-wrapper').find('.datagrid-header-text').text();
+                  const frozenColDtls = self.getFrozenColumnDetails();
+                  const isFrozenColumn = frozenColDtls.filter(col => col.name === columnName).length > 0;
+
+                  if (!isFrozenColumn) {
+                    target.el.addClass('is-over');
+                    showTarget.addClass('is-over');
+                  }
+
                   rect = target.el[0].getBoundingClientRect();
                   showTarget[0].style.left = `${parseInt(rect.left + (Locale.isRTL() ? 2 : 1), 10)}px`;
                   let lastAdjustment = 0;
@@ -3423,6 +3430,30 @@ Datagrid.prototype = {
     });
   },
 
+  getFrozenColumnDetails() {
+    const frozenCols = this.settings.frozenColumns;
+    let frozenColArr = [];
+    const frozenColDtls = [];
+
+    if (frozenCols.left.length > 0) {
+      frozenColArr = $.merge(frozenColArr, frozenCols.left);
+    }
+
+    if (frozenCols.right.length > 0) {
+      frozenColArr = $.merge(frozenColArr, frozenCols.right);
+    }
+
+    for (let i = 0; i < frozenColArr.length; i++) {
+      const filteredCol = this.settings.columns.filter(col => col.id === frozenColArr[i]);
+
+      if (filteredCol.length > 0) {
+        frozenColDtls.push(filteredCol[0]);
+      }
+    }
+
+    return frozenColDtls;
+  },
+
   /**
   * Set draggable columns target elements
   * @private
@@ -3505,6 +3536,19 @@ Datagrid.prototype = {
    * @returns {void}
    */
   arrayIndexMove(arr, from, to) {
+    const targetArr = [arr[from], arr[to]];
+    const frozenColDtls = this.getFrozenColumnDetails();
+    let isFrozenColumn = false;
+
+    for (let i = 0; i < frozenColDtls.length; i++) {
+      const filteredCol = targetArr.filter(col => col.id === frozenColDtls[i].id);
+
+      isFrozenColumn = filteredCol.length > 0;
+      if (isFrozenColumn) {
+        return;
+      }
+    }
+
     arr.splice(to, 0, arr.splice(from, 1)[0]);
   },