Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

De-selection or changing the selection in code - not persisting

See original GitHub issue

I’m submitting a Bug report

Your Environment

Context

I have the slick grid on one side of the page and a details page on the other side as the user switches selection the correct details view renders. I would like to give the user the ability to de-select by clicking on a selected row a 2nd time. I have tried all the suggestions such as angularGrid.slickGrid.setSelectedRows([]) nothing works. Even if I try to select another row through code: trying any of theses: this.angularGrid.gridService.setSelectedRows([1]); this.angularGrid.gridService.highlightRow(1); this.angularGrid.slickGrid.setActiveCell(1,1, false, false, true); doesn’t work. When I debug through it, i can see that for while both rows are highlighted (the original one and the one i’m setting in code) but than at some point the slick grid code gets rid of the new selection. None of my other methods are being hit in the interim so it’s not my code that’s causing it…

 <angular-slickgrid gridId="caseListing"
                             [columnDefinitions]="columnDefinitions"
                             [gridOptions]="gridOptions"
                             gridHeight="85vh"
                             [dataset]="dataSource"
                             (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
                             (onAngularGridCreated)="angularGridReady($event)">

 defineColumns() {
    let that = this;
    this.columnDefinitions = [
      {
        id: 'field1', name: 'field1', field: 'field1', sortable: true, minWidth: 0,
        type: FieldType.string,
        filterable: true, filter: { model: Filters.compoundInput },
        formatter: function (row, cell, value) {
          if (that.dataSource.length < 1) return '';
          return "<div class='highPriority' " + (that.dataSource[row].highPriority ? '' : 'hidden') + "><div style=\"margin-left:30%; margin-top:-85%;\">!</div></div><i class=\"fa fa-circle oval-sm\" aria-hidden=\"true\" style=\"font-size: 10px; color: " + that.dataSource[row].status.color + " \"></i> &nbsp;&nbsp;" + value;
        },

      },
      {
        id: 'field2', name: 'Field2', field: 'field2', sortable: true, minWidth: 0,
        type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput }
      },
      {
        id: 'field3', name: 'Field3', field: 'field3', sortable: true, minWidth: 0,
        type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput }
      }
    ];
  }

 defineOptions() {
    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container'
      },
      fullWidthRows: true,
      rowHeight: 60,
      enableRowSelection: true,
      rowSelectionOptions: {
        // True (Single Selection), False (Multiple Selections)
        selectActiveRow: true
      },
      enableCellNavigation: true,
      enableColumnPicker: true,
      enableExcelCopyBuffer: true,
      enableFiltering: true,
      enableAutoResize: true,
      forceFitColumns: true,
      i18n: this.translate,
    };
  }

  //attempting to de-select a row but doesn't look like the grid allows it
  onCellClicked(arg1, arg2){
      let clickedRow = arg2.row;
      let selectedRows = this.angularGrid.gridService.getSelectedRows();
      let selectedRow = 0;
      if(selectedRows.length > 0) selectedRow = selectedRows[0];
      if(clickedRow == selectedRow){
        //the code reaches here but none of these stay selected as described above
        //this.angularGrid.gridService.setSelectedRows([]);
        //this.angularGrid.gridService.setSelectedRows([1]);
        //this.angularGrid.gridService.highlightRow(1);
        this.angularGrid.slickGrid.setActiveCell(1,1, false, false, true);
       // this.angularGrid.gridService.;
      }
      else{
        this.angularGrid.gridService.setSelectedRows([clickedRow]);
        this.setSelectedCaseId();
      }
  }

setSelectedCaseId(){
  //this will trigger a change event on the details component
    this.selectedCaseId = this.getCurrentlySelectedCaseId();
  }
  getCurrentlySelectedCaseId(){
    let obj= this.angularGrid.gridService.getSelectedRowsDataItem();
    if(obj.length > 0 && obj[0]) return obj[0].id;
    return 0;
  }