const columns = [
{ headerName: "Product", field: "product"},
{ headerName: "Name", field: "name" },
{ headerName: "Date", field: "date" },
];
const columns1 = [
{ headerName: "Type", field: "type" },
{ headerName: "Open", field: "open" },
{ headerName: "High", field: "high" },
{ headerName: "Percentage", field: "pct" }
];
useEffect(() => {
fetch(`http://localhost:8080/all?product=${search}`)
.then(res => { return res.json();
})
.then (data => { setRowData(data);
})
}, [search]);
return (
<div className="Products">
<SearchBar onSubmit={setSearch} />
<div
className="ag-theme-balham"
style={{
height: "300px",
width: "600px"
}}
>
<AgGridReact
columnDefs={columns}
rowData={rowData}
/>
</div>
</div>
)
function SearchBar(props) {
const [innerSearch, setInnerSearch] = useState("");
return (
<div >
<input
aria-labelledby="search-button"
name="search"
id="search"
type="search"
value={innerSearch}
onChange={e => setInnerSearch(e.target.value)}
/>
<button
id="search-button"
type="button"
onClick={() => props.onSubmit(innerSearch)}
>
Search
</button>
</div>
);
}
};
I've gone through a lot of resources to try and get my columns1 to appear after a search, rather than columns. All of the headers from both columns are fields in my API and they all display properly, but I can't seem to split them up and only have columns1 appear when a search is made.
No matter what I try and put in my search bar function, or if I create two <AgGrid/> tables and try to have only one appear, it doesn't work. Either all my columns appear together, or two tables appear.
Related
I am trying to sort data with nested values in a data grid
But getting undefined on sortComparator of Data Grid Columns
Code:
Column Data Setup:
{
headerName: 'Title',
field: `${this.props.type}.title`,
width: 500,
type: "string",
renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
sortComparator: this.titleSorting
}
titleSorting = (a,b)=>{
console.log(a);
console.log(b);
}
Data Grid:
<DataGrid
rows={rowsDataGrid}
columns={columnsDataGrid}
components={{
Toolbar: this.getSearchTextField
}}
pageSize={5}
rowsPerPageOptions={[5]}
// checkboxSelection
// disableSelectionOnClick
autoHeight
/>
Problem both console print undefined
Ideally it should give either the whole row a and row b or atleast row a column data and row b column data
Try with a custom field and the valueGetter param :
{
headerName: 'Title',
field: "CustomField,
valueGetter: () => this.props.type.title,
width: 500,
type: "string",
renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
sortComparator: this.titleSorting
}
And add a comparison algorithm in your comparator function such as
const titleSorting = (a, b) => {
a - b;
}
In my code, I am using AG-Grid with the master detail property to display some data. The code doesn't get any errors and the master row has records, but when I expand the detail, not 1 row is present even though in the network, params.data has values. My code is below. What am I doing wrong, and how should I fix it?
constructor(
private _reportService: ReportService,
) {
this._reportService
.getAllSupplierProductList()
.subscribe((response: any) => {
this.rowData = response;
});
}
public detailCellRendererParams: any = {
detailGridOptions: {
columnDefs: [
{ headerName: 'Ürün Kodu', field: 'StockIntegrationCode' },
{ headerName: 'Ürün Adı', field: 'ProductName' },
{ headerName: 'Ürün Kategorisi', field: 'CategoryName' },
],
defaultColDef: {
flex: 1,
filter: 'agTextColumnFilter',
resizable: true,
sortable: true,
floatingFilter: true,
},
},
getDetailRowData: (params) => {
params.successCallback(params.data.StockIntegrationCode && params.data.ProductName && params.data.CategoryName);
},
} as IDetailCellRendererParams;
rowData: Observable<IReportRow[]>;
onFirstDataRendered(params: FirstDataRenderedEvent) {
// arbitrarily expand a row for presentational purposes
setTimeout(function () {
params.api.getDisplayedRowAtIndex(1)!.setExpanded(true);
}, 0);
}
onGridReady(params: GridReadyEvent) {
}
In the getDetailRowData function, you're given params.data, which is the data of the master row. You should obtain details and pass it to the params.successCallback function like this:
getDetailRowData: (params) => {
this._reportService
.getProductList(params.data.SupplierId)
.subscribe(products => {
params.successCallback(products);
});
}
I am developing an ag-grid with master-detail set to true, the first row of master-detail has a editable cell i.e. "contractID", I want to populate other cells of the master-detail depending upon the fetched contractID.
I tried adding cellValueChanged in the columnDef and also tried to set params.api.rowModel.gridApi.cellValueChanged explicitly in onFirstDataRendered method for the detailGrid, but found no luck.
Master detail grid code:
detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{ headerName: "Contact ID", field: "contractId", editable: true, [cellValueChanged]: "cellValueChanged()" },
{ headerName: "Contact Name", field: "contractName" },
{ headerName: "Category", field: "category" }]
}
}
onFirstDataRendered(params) {
params.api.rowModel.gridApi.cellValueChanged = function (params) {
console.log("cellChanged");
}
}
In case someone still wonders, in detailGridOptions add:
onCellValueChanged: function ($event) {
// your code here
},
This will be triggered every time you change cell value.
Fixed the problem using custom cellRenderer and added an eventListener for change event. I just wanted to have this functionality on the first row of the grid, so added a condition to the rowIndex.
detailCellRendererParams = {
detailGridOptions: {
columnDefs: [{headerName: "Contact ID",field: "contractId",editable: true,
cellRenderer: (params) => {
params.eGridCell.addEventListener('change', (e) => {
this.getDetails(e.target.value);
})
},
{headerName: "Contact Name", field: "contractName"},
{headerName: "Category",field: "category"}]
}
}
getDetails(id): void {
this.apiService.getDetails(id)
.subscribe(result => {
this.gridApi.detailGridInfoMap.detail_0.api.forEachNode(node=> {
if(node.rowIndex == 0){
node.data = result;
node.gridApi.refreshCells();
}}
);
})}
<div style={containerStyle} className="ag-theme-material">
<AgGridReact
columnDefs={this.state.columnDefs}
rowSelection={this.state.rowSelection}
onSelectionChanged={this.onSelectionChanged.bind(this)}
onGridReady={this.onGridReady.bind(this)}
groupSelectsChildren={true}
suppressRowClickSelection={true}
rowData={[{payment_date: 'jan', status: '100'}, {payment_date: 'feb', status: '200'}, {payment_date: 'mar', status: '300'}]}
>
</AgGridReact>
</div>
onSelectionChanged() {
var selectedRows = this.gridApi.getSelectedRows();
let paymentsrequest = [];
selectedRows.forEach(function(selectedRow, index) {
let paymentslistobject = {
'payment_date': selectedRow["payment_date"],
'status': selectedRow["status"]
};
paymentsrequest.push(paymentslistobject);
});
this.setState({
paymentsrequest
});
}
this.state = {
rowSelection: "multiple",
columnDefs: [
{
headerName: "Amount",
field: "status",
width: 250
},{
headerName: "Pay",
field: "",
checkboxSelection: true,
width: 100
},{
headerName: 'Payment Date',
field: 'payment_date',
width: 250
},
],
}
I am using react ag-grid component, I am using checkboxSelection for one of the column using checkboxSelection: true
I have check boxs for all the rows but once first row is checked only then he should be able to check second row till the time we should disable the checkboxes untill he checks first checkbox.
How to validate in columDefs as i was using checkboxSelection: true, How can I validate.
I checked all the documents for this but I didnot found any document
the grid do not display anything, this is the code in the javascript method
columns: [
{ field: "Dimension", title: "Mois", width: "130px" },
{ field: "Value", title: "Variation CA", width: "130px"},
{ field: "Value", title: "", width: "30px", template: '# if (Value >= 0 ) { # <img src="~/Images/uparrow.jpg" /> # } else # { <img src="~/Images/downarrow.jpg" #}#' }
]
});
I can' fix the problem, the grid do not display anything, any suggestions please? how can i display imaes in the column using the if condition