example 19 improvement in aurelia slickgrid v6.6.6

[suvirbhargav]

We discussed a bit on SO and then i downloaded aurelia slicgrid 6.6.6 and looked further why we can not see the rowdetail and checkbox selection at the same time. Then i added this code:

         if (this.gridOptions.enableCheckboxSelector) {
          this.insertDynamicPresetColumns('_checkbox_selector',  this.columnDefinitions);
        }

after that i can see the example 19 good with both checkbox and rowdetail as shown here:

Do you think this is something on the right track? Would be nice if this fixes issues for aurelia slickgrid + aurelia 1 users. If needed i can make a PR on this line. Here is my grid options, similar to your from SO.
Run locally version 6.6.6 of aurelia slicgrid and check example 19 with following options.

    this.gridOptions = {
      autoResize: {
        container: '#demo-container',
        rightPadding: 10
      },
      enableFiltering: false,
      enableRowDetailView: true,
      //darkMode: this._darkMode,
      enableCheckboxSelector: true,
      enableRowSelection: true,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false
      },
      checkboxSelector: {
        hideInFilterHeaderRow: false,
        hideSelectAllCheckbox: false,
      },

      //datasetIdPropertyName: 'rowId', // optionally use a different "id"
      rowDetailView: {
        // optionally change the column index position of the icon (defaults to 0)
        // columnIndexPosition: 1,

        // We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise)
        process: (item) => this.simulateServerAsyncCall(item),
        // process: (item) => this.http.get(`api/item/${item.id}`),

        // load only once and reuse the same item detail without calling process method
        loadOnce: true,

        // limit expanded row to only 1 at a time
        singleRowExpand: true,

        // false by default, clicking anywhere on the row will open the detail view
        // when set to false, only the "+" icon would open the row detail
        // if you use editor or cell navigation you would want this flag set to false (default)
        useRowClick: false,
}

[ghiscoding]

Sorry but I don't want to support older version, it's too much work for an Open Source project which I'm the only maintainer and to which I'm not being paid for. But anyway, I have already made a working demo in Slickgrid-Universal example21 which has both, and I think it was already possible to apply this with older versions as well (you can see the changes I made in this Slickgrid-Universal commit and it's just changes on the example itself so it should be possible on your side too ... ah wait that was the wrong commit, it's actually this commit and yes I made some changes on the lib but again I don't want to support older version sorry). But looking at the changes in Aurelia-Slickgrid in this commit, it's just a code change in the example, I'm not sure if it needed the Slickgrid-Universal code change as well but maybe it didn't have you tried to just to these changes? It worked for me, the only reason I left them as comment is because I don't want my Cypress E2E tests to fail

aurelia-slickgrid/packages/demo/src/examples/slickgrid/example19.ts

Lines 147 to 154 in ea30cf1

	// You could also enable Row Selection as well, but just make sure to disable `useRowClick: false`
	// enableCheckboxSelector: true,
	// enableRowSelection: true,
	// checkboxSelector: {
	// hideInFilterHeaderRow: false,
	// hideSelectAllCheckbox: true,
	// },
	};

Another alternative for you would be to patch it yourself on your project by using something like npm patch-package but I'm not sure that your code is actually correct though, does it return the selected rows when you can slickgrid.getSelectedRows()? In Slickgrid-Universal the code to add the checkbox is here

[suvirbhargav]

Yes, slickgrid.getSelectedRows() seems to work. Here in console i can see row index .

npm patch-pacakge solution seems interesting and handy to try. Then i only need to maintain a small patch.

I am also thinking maybe it is time to try slickgrid-universal directly with my aurelia 1 application. I understand it is a framework agnostic web component, so seems good path forward.

By the way, yes i tried your example as it is and uncommented the code, by default it works on aurelia 2 with latest aurelia-slickgrid but not when running aurelia slickgrid v6.6.6 + aurelia 1. Here is the complete example.

import {
  type AureliaGridInstance,
  type Column,
  Editors,
  ExtensionName,
  FieldType,
  Filters,
  Formatters,
  type GridOption,
} from 'aurelia-slickgrid';
import { autoinject, bindable, PLATFORM } from 'aurelia-framework';
//import { Example19Preload } from './example19-preload';
//import { Example19DetailView } from './example19-detail-view';

const NB_ITEMS = 1000;

export class Example19 {
  private _darkMode = false;
  @bindable detailViewRowCount = 9;
  title = 'Example 19: Row Detail View';
  subTitle = `
    Add functionality to show extra information with a Row Detail View, (<a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/row-detail" target="_blank">Wiki docs</a>)
    <ul>
      <li>Click on the row "+" icon or anywhere on the row to open it (the latter can be changed via property "useRowClick: false")</li>
      <li>Pass a View/Model as a Template to the Row Detail</li>
      <li>You can use "expandableOverride()" callback to override logic to display expand icon on every row (for example only show it every 2nd row)</li>
    </ul>
  `;

  aureliaGrid!: AureliaGridInstance;
  gridOptions!: GridOption;
  columnDefinitions: Column[] = [];
  dataset: any[] = [];
  // extensions!: ExtensionList<any>;
  flashAlertType = 'info';
  message = '';

  constructor() {
    // define the grid options & columns and then create the grid itself
    this.defineGrid();
  }

  get rowDetailInstance() {
    // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways

    // option 1
    // return this.extensions.rowDetailView.instance || {};

    // OR option 2
    return this.aureliaGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView);
  }

  attached() {
    // populate the dataset once the grid is ready
    this.getData();
  }

  detaching() {
    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
  }

  /* Define grid Options and Columns */
  defineGrid() {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true, editor: { model: Editors.text } },
      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
      {
        id: 'percent2', name: '% Complete', field: 'percentComplete2', editor: { model: Editors.slider },
        formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' }
      },
      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
      {
        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
        minWidth: 100,
        formatter: Formatters.checkmarkMaterial, type: FieldType.boolean,
        filterable: true, sortable: true,
        filter: {
          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
          model: Filters.singleSelect
        }
      }
    ];

    this.gridOptions = {
      autoResize: {
        container: '#demo-container',
        rightPadding: 10
      },
      enableFiltering: true,
      enableRowDetailView: true,
      //darkMode: this._darkMode,
      datasetIdPropertyName: 'rowId', // optionally use a different "id"
      rowDetailView: {
        // optionally change the column index position of the icon (defaults to 0)
        // columnIndexPosition: 1,

        // We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise)
        process: (item) => this.simulateServerAsyncCall(item),
        // process: (item) => this.http.get(`api/item/${item.id}`),

        // load only once and reuse the same item detail without calling process method
        loadOnce: true,

        // limit expanded row to only 1 at a time
        singleRowExpand: false,

        // false by default, clicking anywhere on the row will open the detail view
        // when set to false, only the "+" icon would open the row detail
        // if you use editor or cell navigation you would want this flag set to false (default)
        useRowClick: false,

        // how many grid rows do we want to use for the row detail panel (this is only set once and will be used for all row detail)
        // also note that the detail view adds an extra 1 row for padding purposes
        // so if you choose 4 panelRows, the display will in fact use 5 rows
        panelRows: this.detailViewRowCount,

        // you can override the logic for showing (or not) the expand icon
        // for example, display the expand icon only on every 2nd row
        // expandableOverride: (row: number, dataContext: any) => (dataContext.rowId % 2 === 1),

        // Preload View Template
        //preloadViewModel: Example19Preload,

        // ViewModel Template to load when row detail data is ready
        //viewModel: Example19DetailView,
        preloadView: PLATFORM.moduleName('examples/slickgrid/example19-preload.html'),

        // ViewModel Template to load when row detail data is ready
        viewModel: PLATFORM.moduleName('examples/slickgrid/example19-detail-view'),

        // Optionally pass your Parent Component reference to your Child Component (row detail component)
        parent: this,

        onBeforeRowDetailToggle: (e, args) => {
          // you coud cancel opening certain rows
          // if (args.item.rowId === 1) {
          //   e.preventDefault();
          //   return false;
          // }
          console.log('before toggling row detail', args.item);
          return true;
        },
      },
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: false
      },

      // You could also enable Row Selection as well, but just make sure to disable `useRowClick: false`
       enableCheckboxSelector: true,
       enableRowSelection: true,
       checkboxSelector: {
         hideInFilterHeaderRow: false,
         hideSelectAllCheckbox: true,
       },
    };
  }

  onGrid1SelectedRowsChanged(_e: Event, args: any) {
    const grid = args && args.grid;
    console.log('selected rows', grid.getSelectedRows());
  }

  getData() {
    // mock a dataset
    const dataset: any[] = [];
    for (let i = 0; i < NB_ITEMS; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 29));
      const randomPercent = Math.round(Math.random() * 100);

      dataset[i] = {
        rowId: i,
        title: 'Task ' + i,
        duration: (i % 33 === 0) ? null : Math.random() * 100 + '',
        percentComplete: randomPercent,
        percentComplete2: randomPercent,
        percentCompleteNumber: randomPercent,
        start: new Date(randomYear, randomMonth, randomDay),
        finish: new Date(randomYear, (randomMonth + 1), randomDay),
        effortDriven: (i % 5 === 0)
      };
    }

    this.dataset = dataset;
  }

  changeDetailViewRowCount() {
    const options = this.rowDetailInstance.getOptions();
    if (options && options.panelRows) {
      options.panelRows = this.detailViewRowCount; // change number of rows dynamically
      this.rowDetailInstance.setOptions(options);
    }
  }

  changeEditableGrid() {
    // this.rowDetailInstance.setOptions({ useRowClick: false });
    this.rowDetailInstance.collapseAll();
    (this.rowDetailInstance as any).addonOptions.useRowClick = false;
    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
    this.aureliaGrid?.slickGrid.setOptions({
      editable: true,
      autoEdit: true,
      enableCellNavigation: true,
    });
    return true;
  }

  closeAllRowDetail() {
    this.rowDetailInstance.collapseAll();
  }

  showFlashMessage(message: string, alertType = 'info') {
    this.message = message;
    this.flashAlertType = alertType;
  }

  /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
  simulateServerAsyncCall(item: any) {
    // random set of names to use for more item detail
    const randomNames = ['John Doe', 'Jane Doe', 'Chuck Norris', 'Bumblebee', 'Jackie Chan', 'Elvis Presley', 'Bob Marley', 'Mohammed Ali', 'Bruce Lee', 'Rocky Balboa'];

    // fill the template on async delay
    return new Promise((resolve) => {
      setTimeout(() => {
        const itemDetail = item;

        // let's add some extra properties to our item for a better async simulation
        itemDetail.assignee = randomNames[this.randomNumber(0, 10)];
        itemDetail.reporter = randomNames[this.randomNumber(0, 10)];

        // resolve the data after delay specified
        resolve(itemDetail);
      }, 1000);
    });
  }

  toggleDarkMode() {
    this._darkMode = !this._darkMode;
    this.toggleBodyBackground();
    //this.aureliaGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
    this.closeAllRowDetail();
  }

  toggleBodyBackground() {
    if (this._darkMode) {
      document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
    } else {
      document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
    }
  }

  private randomNumber(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
}

[ghiscoding]

I am also thinking maybe it is time to try slickgrid-universal directly with my aurelia 1 application. I understand it is a framework agnostic web component, so seems good path forward.

that's a possibility but there are important things to be aware of when you use the Slickgrid-Universal directly

1. you will have to register and unregister the events yourself and I want to emphasize unregister because Aurelia-Slickgrid does that for you and nothing to worry about, but if you go without it then consider that. On the Slickgrid-Universal side, I use my own custom BindingEventService which I added a .unbindAll() that I can call before disposing the component
2. Aurelia-Slickgrid has a dedicated service for the Row Detail which mount the custom component by itself, but if you go with Slickgrid-Universal, you'll have to similar service. In the Slickgrid-Universal Row Detail example, it's just raw html (I created mainly to test my code) and that is not what you would typically use in real life project.

aurelia-slickgrid/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts

Lines 221 to 237 in ea30cf1

	/** Redraw (re-render) all the expanded row detail View Slots */
	async redrawAllViewSlots() {
	await Promise.all(this._slots.map(async x => this.redrawViewSlot(x)));
	}
	/** Render all the expanded row detail View Slots */
	async renderAllViewModels() {
	await Promise.all(this._slots.filter(x => x?.dataContext).map(async x => this.renderViewModel(x.dataContext)));
	}
	/** Redraw the necessary View Slot */
	async redrawViewSlot(slot: CreatedView) {
	const containerElement = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${slot.id}`);
	if (containerElement?.length >= 0) {
	await this.renderViewModel(slot.dataContext);
	}
	}

By the way, yes i tried your example as it is and uncommented the code, by default it works on aurelia 2 with latest aurelia-slickgrid but not when running aurelia slickgrid v6.6.6 + aurelia 1. Here is the complete example.

Yeah that is what I thought would happen, it most probably needs code that I changed in Slickgrid-Universal Extension Service, that is 1 of the commit I've referenced above. Since you don't have latest code, that is why it doesn't work.

I think that if your patch works, then using the suggested patch package is the easiest way to get you going. I know @zewa666 often uses this, it allows him to keep working without waiting for me to release a new version. I tried it with pnpm patch and pnpm really did a great job with how easy it is to do the patch, for npm though it probably takes a bit of time to get familiar with the patch thing, which is basically a git patch that you apply to your project