I’m using AG-Grid v32.2.1 in a grid where the value of the make
column needs to be parsed before going to the server. When I use valueParser
as a column setting nothing happens.
Here’s how I’m applying the setting:
<template>
<AgGridVue
:rowData="rowData"
:columnDefs="colDefs"
:gridOptions="defaultOptions"
style="height: 500px"
class="ag-theme-quartz"
ref="grid"
/>
</template>
<script setup>
import { ref } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";
const grid = ref(null);
const rowData = ref([
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
]);
const colDefs = ref([
{
field: "make",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: rowData.value.map((item) => item.make),
},
valueParser: (params) => {
return params.newValue + "[EDITED]";
},
editable: true,
},
{ field: "model" },
{ field: "price" },
{ field: "electric" },
]);
let defaultOptions = {
domLayout: "autoHeight",
cellFlashDuration: 250,
cellFadeDuration: 800,
defaultColDef: {
enableCellChangeFlash: true,
},
};
</script>