CODEWITHSUNDEEP
ag-grid
kim2014
kim2014

Reputation: 107

selection checkbox for ag-grid table

I want to have the selection checkbox for ag-grid with the option below: But didn't see the checkbox on the left. Have any idea what else needs to be settings to make the selection checkbox works.

self.appliancesInGroupGridOpts = {
        angularCompileRows: true,
        enableColResize : true,
        rowData: null,
        checkboxSelection: true,
        enableSorting: true,
        columnDefs: [
          {
            valueGetter: 'data.name',
            headerName: $filter('translate')('APPLIANCE.NAME'),
            suppressSizeToFit : true,
            template: '<span class="appliance-name">{{data.name}}</span>',
            checkboxSelection: true,
            width: 200
          } ,
           {
            valueGetter: 'data.updated',
            headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
            suppressSizeToFit : true,
            template: '<span class="appliance-updated">{{data.updated}}</span>',
            checkboxSelection: true,
            width: 200
          } 
        ] ,

Upvotes: 4

Views: 56895

Answers (2)

Einav Hacohen
Einav Hacohen

Reputation: 837

http://www.ag-grid.com/angular-grid-selection/index.php

Checkbox selection can be used in two places:

  • row selection
  • group selection.

To include checkbox selection for a column, set the attribute

columnDefs: [{
    valueGetter: 'data.name',
    headerName: $filter('translate')('APPLIANCE.NAME'),
    suppressSizeToFit : true,
    template: '<span class="appliance-name">{{data.name}}</span>',
    width: 200,   
    checkboxSelection: true
    ...

on the column definition.

You can set this attribute on as many columns as you like, however, it doesn't make sense to have it in more one column in a table.

To enable checkbox selection for groups, set the attribute:

groupColumnDef: {
    headerName: "Athlete", 
    field: "athlete", 
    width: 200,
    cellRenderer: {
        renderer: "group",
        checkbox: true
    }
}

for the group renderer. See the grouping section for details on the group renderer.

Selecting groups can have the effect of selecting the group row, or selecting all the children in the group. This is done by setting the attribute: 

groupSelectsChildren: {true || false}

  • When set to false, then selecting the group will select the group node.

  • When set to true, then selecting the group will either select or deselect all of the children.

The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the selectedRows list.

The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than two columns for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.

In Addition: you could add this on the col definition checkboxSelection:

Set to true to render a selection checkbox in the column.

Upvotes: 13

Walfrat
Walfrat

Reputation: 5353

What say einav is true however i think he forgot the very base :

set the property rowSelection:'single' or rowSelection:'multiple' on gridOptions if you want to have selection enabled :)

The attribute checkboxSelection is only for columns not grid options.

The following properties are relevant to selection:

rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection. rowDeselection: Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row. Normal behaviour with the grid disallows deselection of nodes (ie once a node is selected, it remains selected until another row is selected in it's place). suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select when the row is clicked.

From the same link given by Einav

Upvotes: 2

Related Questions