import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import axios from 'axios';
import { Link, browserHistory } from 'react-router';
import { AgGridReact, AgGridColumn } from "ag-grid-react";
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';
class Payments extends React.Component {
constructor(props) {
super(props);
this.state = {
rowSelection: "multiple",
columnDefs: [
{
headerName: "Paid For",
field: "paid_for",
width: 250
},
{
headerName: 'Amount',
field: 'amount',
width: 250
},
{
headerName: 'Payment Date',
field: 'payment_date',
width: 250
},
{
headerName: 'Reccurence',
field: 'recurrence_time',
width: 250
},
{
headerName: "Status",
field: "status",
checkboxSelection: true,
width: 250
},
],
paymentsrequest: [],
rowData: []
};
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
window.onresize = () => {
this.gridApi.sizeColumnsToFit();
}
}
onSelectionChanged() {
var selectedRows = this.gridApi.getSelectedRows();
let pendingpayments = selectedRows.filter(el => el.status == "Pending")
let paymentsrequest = [];
pendingpayments.forEach(function(selectedRow, index) {
let paymentslistobject = {
'payment_date': selectedRow["payment_date"],
'status': selectedRow["status"]
};
paymentsrequest.push(paymentslistobject);
});
this.setState({
paymentsrequest
});
}
render() {
return (
<AgGridReact
columnDefs={this.state.columnDefs}
rowSelection={this.state.rowSelection}
onGridReady={this.onGridReady.bind(this)}
groupSelectsChildren={true}
suppressRowClickSelection={true}
rowData={[{paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Paid'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-14',recurrence_time: 'Quarterly',status: 'Pending'}, {paid_for: 'Plan C + B', amount: '10000',payment_date: '2018-11-15',recurrence_time: 'Quarterly',status: 'Pending'}]}
onSelectionChanged={this.onSelectionChanged.bind(this)}>
</AgGridReact>
)
}
}
export default Payments;
I am using react ag-grid component and I want the input box for the status pending alone instead of all the rows, I have make use of cell-rendered but it doesnot worked,
How to render check box only for the status Pending, Check box should not be shown which has status Paid.
Solution would help me alot,
I have read all the documents but i am unable to make use of that, any one please guide me in this.
You should modify your checkBoxSelection
to be a function instead of just true/false.
As per docs -
colDef.checkboxSelection can also be a function that returns true/false - use this if you want only checkboxes on some rows but not others
{
headerName: "Status",
field: "status",
checkboxSelection: function(params) {
return params.data.status === 'Pending'
},
width: 250
},
Ag grid example here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.