Currently, I am integrating AG Grid with Vue. My project has a specific requirement where two checkboxes are displayed using a cellRendererFramework. However, I am facing difficulties in fetching the values of these checkboxes from the row definitions. The goal is to be able to select rows based on which checkboxes are checked within the ag-grid.
Below is the code for the child component:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<template>
<input type="checkbox" :id="inputId" :name=name @click ="clickHandler($event)" />
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
name: 'CheckBoxRenderer',
data: function() {
return {
id: '',
name: '',
inputId: '',
rx1List: [],
rx2List: [],
};
},
beforeMount() {
this.id = this.params.data.id;
this.name = 'rx' + this.id;
this.inputId = this.params.column.colId + '_' + this.id; // if colId(headerName) ="rx1", and id is 2, inputId = rx1_2
},
methods: {
clickHandler(e) {
//console.log(e.target.checked, this.params.column.colId); // to get Header name use colId property
var group = document.querySelectorAll(`input[name="${this.name}"]`);
// console.log(group.length);
if (e.target.checked) {
for (var i = 0; i < group.length; i++) {
//console.log(group[i].checked);
group[i].checked = false;
}
e.target.checked = true;
if (this.params.column.colId === 'rx1') {
this.rx1List.push(this.id);
}
console.log(this.rx1List);
} else {
e.target.checked = false;
}
}
}
});
</script>
<style scoped></style>Here is the parent component's ag grid column definition:
{
field: "rx1",
headerName: "Rx1",
cellRendererFramework: "checkBoxRenderer",
valueSetter: function (param) {
var id = "rx1_" + param.data.id;
alert("if check box checked?: ", document.querySelector(id).checked);
param.data.rx2 = document.querySelector(id).checked;
console.log("Rx2: ", param.data.rx2);
return param.data.rx2;
},
flex: 1,
maxWidth: 80,
cellStyle: { textAlign: "center"},
},