简体   繁体   中英

Multiple row selection on checkbox and single selection on clicking the row in ag-grid

I wanted to do a multiple selection of rows when i click on checkbox cells and if i click on normal cells of the row it should select the row and clicking on another row will select that row. By far whatever i tried i was able to to either do multiple selection select or single select on row. How to achieve both in same grid based on column click.

<ag-grid-angular  
      #agGrid 
      [columnDefs] = "columnDefs" 
      class = "ag-grid20-context content" 
      [rowData] = "rowData"
      [rowSelection]="multiple"
      [suppressRowClickSelection]= true
      [enableRangeSelection]= true
      [enableCellChangeFlash]= true
      (rowClicked)="onRowClicked($event)" 
      (cellClicked)='onCellClicked($event)'
      (gridReady)="onGridReady($event)" 
      [gridOptions]="gridOptions"
      (selectionChanged) = 'onSelectionChanged($event)'>
 </ag-grid-angular>

this.alertColumnDef =  [  
  {
    rowMultiSelectWithClick:true,
    checkboxSelection: true,
    filter: false,
    width:20
  },
  { headerName: 'Owner', field: 'customerId' },
  { headerName: 'Code', field: 'code' },
  { headerName: 'Description', field: 'description' },
  { headerName: 'Summary', field: 'summary' },
  { headerName: 'Severity', field: 'severity' },
  { headerName: 'Category', field: 'category' },
  { headerName: 'Alert Type', field: 'alertType' }
];

can anyone help in achieving, Multiple selection on clicking checkbox and single selection while clicking on rows.

You can use setSelected method on cell click. According to ag-grid documentation:

This method takes two parameters: selected: set to true to select, false to un-select. clearSelection (optional): for selection only. If true, other nodes selection will be cleared. Use this if you do not want multi selection and want this node to be exclusively selected.

onCellClicked(params) { params.node.setSelected(true, true); }

I create an example please take a look

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM