Skip to content

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

I use react ag-grid and I have checkboxSelection on row. I want to default checked some rows, not checked some rows. 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>

Also I use enterprise mode. So I am open every solutions.

Answer

I solved under favour of this website 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>

Also I added a new jsx file and import my js file.

import React, { Component } from "react";

export default class 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}
      />
    );
  }
}