Both multiple row selection and row view detail in aurelia slickgrid

Question

Here is my grid defination and column definition.

defineGrid(): void {
    this.columnDefinitions = [
      {
        id: 'state',
        name: 'STATUS',
        field: 'state',
        sortable: true,
        type: FieldType.string,
        width: 50,
        filterable: true,
        cssClass: 'align-middle'
      },
      {
        id: 'customerName',
        name: 'customer Name',
        field: 'customerName',
        sortable: true,
        type: FieldType.string,
        width: 100,
        filterable: true,
        cssClass: 'align-middle'
      }
    ];

    this.gridOptions = {
      autoResize: {
        container: '#demo-container',
        rightPadding: 10
      },

      enableFiltering: true,
      enableAutoResize: true,
      enableRowDetailView: true,
      enableCellNavigation: true,
      enableCheckboxSelector: true,
      checkboxSelector: {
        // optionally change the column index position of the icon (defaults to 0)
        columnIndexPosition: 1,

        // you can toggle these 2 properties to show the "select all" checkbox in different location
        hideInFilterHeaderRow: false
        //hideInColumnTitleRow: true,
        //applySelectOnAllPages: true // when clicking "Select All", should we apply it to all pages (defaults to true)
      },
      enableRowSelection: true,
      rowSelectionOptions: {
        selectActiveRow: false
      },
      autoHeight: true,
      rowHeight: 58, // increase row height so that the custom elements fits in the cell,
      //alwaysShowVerticalScroll: false,
      datasetIdPropertyName: 'rowId', // optionally use a different "id"
      rowDetailView: {

        columnIndexPosition: 2,


        process: (item: any) => this.simulateServerAsyncCall(item),
        loadOnce: true,
        singleRowExpand: false,

        useRowClick: false, //true,

        panelRows: 9, //this.detailViewRowCount,

        // ViewModel Template to load when row detail data is ready
        viewModel: PLATFORM.moduleName('../hello-world/hello-world'),
        parent: this
      }
    };
  }

I can get the aurelia slickgrid table with multi selection row with checkbox or rowViewDetail but not both at the same time. Is there a limitation in aurelia slickgrid? "aurelia-slickgrid": "^6.6.5" with aurelia 1. I am trying to get both multiple row selection and rowDetailView.

Answer 1

I tried Row Selections and Row Detail View with Example 19 of Aurelia-Slickgrid and as far as I can see, it's working fine with the options shown below. There's nothing really special about the settings except that you need to make sure to disable useRowClick because enabling it would conflict with Row Selection, but that's about it, the other options are just regular options.

this.gridOptions = {
  enableRowDetailView: true,
  enableCheckboxSelector: true,
  enableRowSelection: true,
  rowSelectionOptions: {
    // True (Single Selection), False (Multiple Selections)
    selectActiveRow: false
  },
  checkboxSelector: {
    hideInFilterHeaderRow: false,
    hideSelectAllCheckbox: true,
  },
  rowDetailView: {
    // make sure to disable single row click to avoid conflict with Row Selection
    useRowClick: false,

    //...
  }
};

and as you can see from the animated gif below, it all seems to be working fine with both plugins enabled... Update: actually, I'm not sure why Stack Overflow doesn't allow me to upload the animated gif today but you can visit this imgur website link for the animated gif

https://imgur.com/t3bsldS

I was thinking to modify the Example 19 and upload the change, but I have Cypress E2E tests that also include tests for useRowClick, so I don't want to remove these tests neither modify the example, but anyway the only settings I've changed are shown above.

Please note that this is tested against v8.x and not v6.x, but I don't see anything that really changed in Row Detail between these 2 versions, so I assume the same settings should still be valid in v6.x