javascripthtmlreactjsag-grid

How can I set default checked in Ag-Grid React.js?


I use react ag-grid and I have checkboxSelection on rows. I want some rows to be checked by default and others not. How can I do that?

// ...
columnDefinationVoucherList: [
  { headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, },
  { headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true },
  { headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true },
  { headerName: "Seç", field: "", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, checkboxSelection: true, },
],

// ...
<AgGridReact
  columnDefs={this.state.columnDefinationVoucherList}
  headerHeight={30}
  rowHeight={20}
  rowData={this.state.documentList}
  onColumnResized={true}
  enableCellChangeFlash={true}
  enableCellTextSelection={true}
  enableCellExpressions={true}
  enableSorting={true}
  enableFilter={true}
  enableGroupEdit={true}
  enableRangeHandle={true}
  defaultColDef={this.state.shortGridDefaultColDef}
  rowSelection={'multiple'}
  onSelectionChanged={this.GetSelectedVouchers}
>
</AgGridReact>

I also use enterprise mode, so I am open to all solutions.


Solution

  • I solved it using the technique from this blog post: https://blog.ag-grid.com/binding-boolean-values-to-checkboxes-in-ag-grid/

    import CheckboxRenderer from './CheckboxRenderer';
    
    // ...
    columnDefinationVoucherList: [
      { headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, },
      { headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true },
      { headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true },
      { headerName: "Seç", field: "IsDocumentSelected", cellRenderer: "checkboxRenderer", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, editable: false },
    ],
    
    // ...
    <AgGridReact
      columnDefs={this.state.columnDefinationVoucherList}
      headerHeight={30}
      rowHeight={20}
      rowData={this.state.documentList}
      onColumnResized={true}
      enableCellChangeFlash={true}
      enableCellTextSelection={true}
      enableCellExpressions={true}
      enableSorting={true}
      enableFilter={true}
      enableGroupEdit={true}
      enableRangeHandle={true}
      defaultColDef={this.state.shortGridDefaultColDef}
      rowSelection={'multiple'}
      onSelectionChanged={this.GetSelectedVouchers}
      frameworkComponents={{ checkboxRenderer: CheckboxRenderer}}
    >
    </AgGridReact>
    

    Here is the CheckboxRenderer.jsx file that I added and imported:

    import React, { Component } from "react";
    
    export default class CheckboxRenderer extends Component {
      constructor(props) {
        super(props);
        this.checkedHandler = this.checkedHandler.bind(this);
      }
      checkedHandler(e) {
        let checked = e.target.checked;
        let colId = this.props.column.colId;
        this.props.node.setDataValue(colId, checked);
      }
      render() {
        return (
          <input
            type="checkbox"
            onClick={(e)=>{this.checkedHandler(e)}}
            checked={this.props.value}
          />
        );
      }
    }