CODEWITHSUNDEEP
reactjsag-grid
techStud
techStud

Reputation: 318

ag-grid header checkbox selecting all the rows even the row that doesn't has the checkbox

I have implemented a grid that contains rows with checkbox for first column except the last row(i.e, doesn't have any checkbox for last row).

const colDef = { 
        headerCheckboxSelection: this.forCheckbox,
        checkboxSelection: this.forCheckbox
 }

forCheckbox(params) {
    const displayedColumns = params.columnApi.getAllDisplayedColumns();
    if (params.node) {
        return (displayedColumns[0] === params.column  &&(params.node.data.myColNameValue !== '');
    }
    return (displayedColumns[0] === params.column);
}

so myColNameValue is '' only for the last row. And because of this condition last row of the grid will not have checkbox. But when I am clicking on the header checkbox it is checking and selecting all the rows along with the last row as well even though it doesn't has a checkbox.

Upvotes: 0

Views: 6119

Answers (1)

koolhuman
koolhuman

Reputation: 1651

Implement isRowSelectable() function and return false for the row which you don't want to be selected

See here - https://www.ag-grid.com/javascript-grid-selection/#selectable-rows-with-header-checkbox

In below code (ag-grid Javascript) only rows with year < 2007 are selectable.

constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Age",
        field: "age"
      },
      {
        headerName: "Country",
        field: "country",
        headerCheckboxSelection: true,
        checkboxSelection: true
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Date",
        field: "date"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];
    this.rowSelection = "multiple";
    this.isRowSelectable = function(rowNode) {
      return rowNode.data ? rowNode.data.year < 2007 : false;
    };
    this.defaultColDef = { width: 200 };
  }

Upvotes: 1

Related Questions