[英]Ag-grid checkbox render based on column data?
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, 我正在使用react ag-grid组件,并且我希望状态单独的输入框而不是所有行都处于等待状态,我使用了单元格渲染,但是它不起作用,
How to render check box only for the status Pending, Check box should not be shown which has status Paid. 如何仅显示状态为Pending的复选框,不应显示状态为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. 您应该将checkBoxSelection
修改为一个函数,而不只是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 colDef.checkboxSelection也可以是返回true / false的函数-如果只需要某些行而不是其他行的复选框,请使用此功能
{
headerName: "Status",
field: "status",
checkboxSelection: function(params) {
return params.data.status === 'Pending'
},
width: 250
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.