Dynamic group

Methods addGroup and clearGroup

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var grid = new FancyGrid({
    tbar: [{
      type: 'combo',
      emptyText: 'Select Group',
      data: [{
        index: 0,
        column: ''
      }, {
        index: 1,
        column: 'Brand'
      }, {
        index: 2,
        column: 'Model'
      }, {
        index: 3,
        column: 'Engine'
      }, {
        index: 4,
        column: 'Transmission'
      }, {
        index: 5,
        column: 'HP'
      }, {
        index: 6,
        column: 'Fuel'
      }, {
        index: 7,
        column: 'Drive'
      }, {
        index: 8,
        column: 'Manufactured'
      }, {
        index: 9,
        column: 'Shade'
      }, {
        index: 10,
        column: 'Price'
      }],
      displayKey: 'column',
      valueKey: 'index',
      width: 120,
      value: 1,
      editable: false,
      subSearch: false,
      events: [{
        change: function(field, value) {
          var item = field.data[value];

          value = Number(value);

          switch (value) {
            case 0:
              grid.clearGroup();
              break;
            case 9:
              grid.addGroup('color', true);
              break;
            default:
              grid.addGroup(item.column.toLocaleLowerCase(), true);
          }
        }
      }]
    }],
    renderTo: 'container',
    width: 900,
    height: 650,
    theme: 'extra-gray',
    selModel: {
      type: 'rows',
      activeCell: true
    },
    trackOver: true,
    filter: true,

    grouping: {
      by: 'brand'
    },

    data: data,
    defaults: {
      resizable: true,
      sortable: true,
      width: 95,
      align: 'center',
      cellAlign: 'center'
    },
    columns: [{
      type: 'order'
    }, {
      index: 'brand',
      title: 'Brand'
    }, {
      index: 'model',
      title: 'Model'
    }, {
      index: 'engine',
      title: 'Engine'
    }, {
      index: 'transmission',
      title: 'Transmission'
    }, {
    ...