Combination of row detail view and checkboxSelector option makes weird behavior in the angular slick grid

Question

I have created the slick grid with row detail view with checkbox .Its working well on row expand action.But row detail view not visible When i expand the row and click the checkbox in the grid

Expected behaviour :

When rows are expanded to detailed view and checkbox clicked in the grid, detailed view should still be the same

Here i attached sample screrenshot

When expand the row detail

When click check box action

Ts Code sample :

export class GridRowDetail implements OnInit {

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];
  detailViewRowCount = 9;
  message: string;


  constructor() { }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  get rowDetailInstance(): any {

    return this.angularGrid.extensions.rowDetailView.instance || {};


  }

  ngOnInit(): void {
    this.defineGrid();
  }


  defineGrid() {


    this.columnDefinitions = [
      {
        id: 'customername',
        name: 'Customer Name',
         field: 'customername',
         minWidth: 190,
           cssClass: 'cell-title',

         sortable: true,
        queryFieldSorter: 'id',
         type: FieldType.string
      },

      { id: 'orderamount',
       name: 'order Amount',
        field: 'orderamount',
        minWidth: 190,
        },
         {
          id: 'orderdate',
          name: 'Orderdate',
          field: 'orderdate',
          minWidth: 160,
          type: FieldType.dateIso,
          sortable: true,

          formatter: Formatters.dateIso,
        }
    ];


    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 10
      },
      enableFiltering: true,
      enableRowDetailView: true,
      rowSelectionOptions: {
        selectActiveRow: true
      },
      rowMoveManager: {
        onBeforeMoveRows: (e, args) => this.onBeforeMoveRows(e, args),
        onMoveRows: (e, args) => this.onMoveRows(e, args),
     },
      enableCheckboxSelector: true,
      enableRowSelection: true,
      checkboxSelector: {
        hideInFilterHeaderRow: false,
      },
      multiSelect: false,
      datasetIdPropertyName: 'id',
      rowDetailView: {
        process: (item) => this.makeRowData(item),
        loadOnce: true,
        singleRowExpand: false,
        useRowClick: false,
        panelRows: 7,
        viewComponent: RowDetailView
      }
    };

    this.getData();
  }

  childColumnDefinitions = [


    {
     id: 'productname',
     name: 'Product Name',
      field: 'productname',
       width: 220,
        cssClass: 'cell-title',
     filterable: true,
      sortable: true,
     queryFieldSorter: 'id',
      type: FieldType.string

   },

    { id: 'price',
    name: 'Price',
     field: 'price',
     minWidth: 90,
      filterable: true },
      { id: 'quantity',
    name: 'Quantity',
     field: 'quantity',
     minWidth: 90,
      filterable: true }
];

  getData() {

    this. dataset = [
     
      {

       id: 'id_d4',
        customername: "customer3",
        orderamount: "5300",
        orderdate: "dec15",
        'childs':[]
      },
      
      {

         id: 'id_d6',
        customername: "customer5",
        orderamount: "5030",
        'childs':[],
        orderdate: "dec15",
      },
      {


        id: 'id_1d2',
        customername: "customer11",
        orderamount: "500",
        orderdate: "dec15",
        'childs':[]
      },
   
      {


        id: 'id_1d5',
        customername: "customer14",
        orderamount: "300",
        orderdate: "dec15",
        'childs':[]
      },
      {


        id: 'id_1d6',
        customername: "customer15",
        orderamount: "5030",
        orderdate: "dec15",
        'childs':[]
      },
      {


        id: 'id_11d2',
        customername: "customer16",
        orderamount: "500",
        orderdate: "dec15",
        'childs':[]
      },
      {


        id: 'id_11d3',
        customername: "customer14",
        orderamount: "5000",
        orderdate: "dec15",
        'childs':[]
      },
      {


        id: 'id_11d4',
        customername: "customer25",
        orderamount: "5300",
        orderdate: "dec15",
        'childs':[]
      },
     
      {


        id: 'id_d210',
        customername: "customer11",
        orderamount: "300",
        orderdate: "dec15",
        'childs':[]
      },

    ];
  }

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

  closeAllRowDetail() {
    if (this.angularGrid && this.angularGrid.extensionService) {
      this.rowDetailInstance.collapseAll();
    }
  }

 makeRowData(item: any) {

    const itemDetail = item;
    itemDetail.id = itemDetail.id
    itemDetail.dataSet=itemDetail.childs;
    itemDetail.columnDefinition=this.childColumnDefinitions;
    return itemDetail

  }


  onGridItemClick(event)
  {
    console.log("event", event);
}

  onBeforeMoveRows(e, data){

   this. collapseAll();
    for (let i = 0; i < data.rows.length; i++) {
      // no point in moving before or after itself
      if (data.rows[i] === data.insertBefore || data.rows[i] === data.insertBefore - 1) {
        e.stopPropagation();
        return false;
      }
    }
    return true;
  }
  collapseAll() {
    var rowDetail = this.angularGrid.extensionService.getSlickgridAddonInstance(
      ExtensionName.rowDetailView
    );
    rowDetail.collapseAll();
  }
  onMoveRows(e, args) {
    const extractedRows = [];
    let left;
    let right;
    const rows = args.rows;
    const insertBefore = args.insertBefore;
    left = this.dataset.slice(0, insertBefore);
    right = this.dataset.slice(insertBefore, this.dataset.length);
    rows.sort((a, b) => {
      return a - b;
    });

    for (let i = 0; i < rows.length; i++) {
      extractedRows.push(this.dataset[rows[i]]);
    }

    rows.reverse();

    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      if (row < insertBefore) {
        left.splice(row, 1);
      } else {
        right.splice(row - insertBefore, 1);
      }
    }
    this.dataset = left.concat(extractedRows.concat(right));
    const selectedRows = [];

    for (let i = 0; i < rows.length; i++) {
      selectedRows.push(left.length + i);
    }

    this.angularGrid.slickGrid.resetActiveCell();
    this.angularGrid.slickGrid.setData(this.dataset);
    this.angularGrid.slickGrid.setSelectedRows(selectedRows);
    this.angularGrid.slickGrid.render();
  }



}

Html code sample

<div class="container-fluid">
  <angular-slickgrid gridId="grid21" [columnDefinitions]="columnDefinitions"
  [gridOptions]="gridOptions"
    [dataset]="dataset"  (sgOnClick)="onGridItemClick($event)" (onAngularGridCreated)="angularGridReady($event)">
  </angular-slickgrid>
</div>

Answer 1

That was a bug and is now fixed in the version 2.25.0, see the Release Note

The issue is related to the fact that when you select a row, it invalidate all the SlickGrid rows (a common term used by SlickGrid which basically means that all rows needs to be re-rendered) but when that happens, we also need to advise the Row Detail Extension to also redraw/re-render the row detail content. So the fix in the lib was simply to redraw all row detail content whenever a row selection happens via the onSelectedRowsChanged event.

Also a side note on your print screen, you should probably use the columnIndexPosition option to tell exactly which position you want to put each icon, that was added few months back and all SlickGrid plugins with icons supports it (RowMove, RowDetail, RowSelection), for example to change the column position of the row detail icon you can do the following

this.gridOptions = {
  rowDetailView: {
    // optionally change the column index position of the icon (defaults to 0)
    columnIndexPosition: 1,
  }
};