In AG Grid, how can i set different value formatters for the same cell?
The 1st formatter should apply when the cell is NOT in edit mode. In this case it should display an icon.
And the 2nd formatter when cell is in edit mode. In this case it should display text instead of an icon.
This way:
What i’ve already tried is to set custom valueFormatter and cellRenderer but it doesn’t work.
class CustomCellRenderer{
eGui;
init(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = params.value.icon;
}
getGui() {
return this.eGui;
}
refresh() {
return false;
}
}
const cellSettings = {
field: 'event',
cellDataType: 'object',
valueFormatter: (params) => {
return params.value.text;
},
cellEditor: 'agRichSelectCellEditor',
cellRenderer: CustomCellRenderer,
cellEditorParams: {
allowTyping: true,
filterList: true,
highlightMatch: true,
valueListMaxHeight: 200
}
}
Here’s what my data for this cell looks like:
const cellData = [
{
text: 'Text',
icon: icon
},
{
text: 'Text',
icon: icon
},
{
text: 'Text',
icon: icon
},
{
text: 'Text',
icon: icon
},
{
text: 'Text',
icon: icon
}
];
To achieve different formatting for a cell in AG Grid based on whether it is in edit mode or not, you can use a combination of cellRenderer and cellEditor with custom logic. The cellRenderer will handle the display of the icon when the cell is not in edit mode, and the cellEditor will handle the display of the text when the cell is in edit mode.
Here’s how you can do it:
1. Custom Cell Renderer: This will render the icon when the cell is not in edit mode.
2. Custom Cell Editor: This will render the text when the cell is in edit mode.
Step 1: Custom Cell Renderer
Create a custom cell renderer to display the icon.
class CustomCellRenderer {
eGui;
init(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = params.value.icon;
}
getGui() {
return this.eGui;
}
refresh(params) {
this.eGui.innerHTML = params.value.icon;
return true;
}
}
Step 2: Custom Cell Editor
Create a custom cell editor to display the text when the cell is in edit mode.
class CustomCellEditor {
eInput;
init(params) {
this.eInput = document.createElement('input');
this.eInput.value = params.value.text;
this.eInput.style.width = '100%';
}
getGui() {
return this.eInput;
}
afterGuiAttached() {
this.eInput.focus();
this.eInput.select();
}
getValue() {
return {
text: this.eInput.value,
icon: params.value.icon // Assuming the icon remains the same
};
}
refresh() {
return false;
}
}
Step 3: Apply to Column Definition
Configure your column definition to use the custom cell renderer and cell editor.
const cellSettings = {
field: 'event',
cellDataType: 'object',
cellRenderer: CustomCellRenderer,
cellEditor: CustomCellEditor,
editable: true, // Make sure the cell is editable
cellEditorParams: {
// Additional params if needed
}
}
Putting It All Together
Here is the complete setup:
const cellData = [
{
text: 'Text 1',
icon: '<i class="fa fa-icon1"></i>'
},
{
text: 'Text 2',
icon: '<i class="fa fa-icon2"></i>'
},
{
text: 'Text 3',
icon: '<i class="fa fa-icon3"></i>'
}
];
const columnDefs = [
{
headerName: "Event",
field: 'event',
cellDataType: 'object',
cellRenderer: CustomCellRenderer,
cellEditor: CustomCellEditor,
editable: true
}
];
const gridOptions = {
columnDefs: columnDefs,
rowData: cellData
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
HTML Setup
Ensure you have a div with an ID of myGrid to initialize the grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AG Grid Example</title>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.noStyle.js"></script>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 100%; width: 100%;"></div>
<script src="path/to/your/script.js"></script>
</body>
</html>
This setup ensures that the cell displays an icon when not in edit mode and switches to text input when in edit mode. Adjust the CustomCellRenderer and CustomCellEditor classes as needed to fit your specific requirements.