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.
Advertisement
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} /> ); } }