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 ?
JavaScript
x
26
26
1
columnDefinationVoucherList: [
2
{ headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, },
3
{ headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true },
4
{ headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true },
5
{ headerName: "Seç", field: "", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, checkboxSelection: true, },
6
],
7
8
<AgGridReact
9
columnDefs={this.state.columnDefinationVoucherList}
10
headerHeight={30}
11
rowHeight={20}
12
rowData={this.state.documentList}
13
onColumnResized={true}
14
enableCellChangeFlash={true}
15
enableCellTextSelection={true}
16
enableCellExpressions={true}
17
enableSorting={true}
18
enableFilter={true}
19
enableGroupEdit={true}
20
enableRangeHandle={true}
21
defaultColDef={this.state.shortGridDefaultColDef}
22
rowSelection={'multiple'}
23
onSelectionChanged={this.GetSelectedVouchers}
24
>
25
</AgGridReact>
26
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/
JavaScript
1
28
28
1
import CheckboxRenderer from './CheckboxRenderer';
2
columnDefinationVoucherList: [
3
{ headerName: "", cellRenderer: countCellIndex, width: 50, minWidth: 40, maxWidth: 50, editable: false, },
4
{ headerName: "Belge Kodu", field: "ApplicationVoucher.Voucher.VoucherCode", width: 50, minWidth: 50, maxWidth: 80, suppressSizeToFit: true, sortable: true },
5
{ headerName: "Belge Adı", field: "ApplicationVoucher.Voucher.VoucherName", width: 120, minWidth: 50, suppressSizeToFit: true },
6
{ headerName: "Seç", field: "IsDocumentSelected", cellRenderer: "checkboxRenderer", width: 90, minWidth: 10, suppressSizeToFit: true, maxWidth: 50, editable: false },
7
],
8
<AgGridReact
9
columnDefs={this.state.columnDefinationVoucherList}
10
headerHeight={30}
11
rowHeight={20}
12
rowData={this.state.documentList}
13
onColumnResized={true}
14
enableCellChangeFlash={true}
15
enableCellTextSelection={true}
16
enableCellExpressions={true}
17
enableSorting={true}
18
enableFilter={true}
19
enableGroupEdit={true}
20
enableRangeHandle={true}
21
defaultColDef={this.state.shortGridDefaultColDef}
22
rowSelection={'multiple'}
23
onSelectionChanged={this.GetSelectedVouchers}
24
frameworkComponents={{ checkboxRenderer: CheckboxRenderer}}
25
>
26
</AgGridReact>
27
28
Also I added a new jsx file and import my js file.
JavaScript
1
24
24
1
import React, { Component } from "react";
2
3
export default class extends Component {
4
constructor(props) {
5
super(props);
6
this.checkedHandler = this.checkedHandler.bind(this);
7
}
8
checkedHandler(e) {
9
let checked = e.target.checked;
10
let colId = this.props.column.colId;
11
this.props.node.setDataValue(colId, checked);
12
}
13
render() {
14
return (
15
<input
16
type="checkbox"
17
onClick={(e)=>{this.checkedHandler(e)}}
18
checked={this.props.value}
19
/>
20
);
21
}
22
}
23
24