I am working with AG grid in vue. I have a requirement where, I have two checkboxes rendered using a cellRendererFramework. I am unable to find a way to collect the checkboxes values from row definitions. In ag-grid, I need to select rows based on which rows are checked.
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>Parent component 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"},
},
Define the click handler in the parent component and pass it down to the child as a prop. The child component will only need to call the prop, the parent component will keep track of the checked state(s) and render the grid accordingly. Here's a very simple and contrived example:
Vue.config.productionTip = false;
const Child = {
name: 'Child',
props: ['onCheck'],
methods: {
handleCheck(e) {
console.log(`${e.target.checked ? 'Checked' : 'Unchecked'}, let's call our onCheck prop`);
this.onCheck(e);
}
},
template: `<div><input type="checkbox" id="checkbox1" @change="handleCheck($event)" /></div>`,
}
const Parent = {
name: 'Parent',
data() {
return {
state: false,
};
},
methods: {
handleCheck(e) {
console.log("Got a click event from child!");
this.state = e.target.checked;
}
},
components: { Child },
props: [],
template: '<div><Child :onCheck="handleCheck" /><div>state: {{ state }}</div></div>',
};
const App = new Vue({
el: '#root',
components: { Parent },
template: '<Parent />',
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>A minor aside, you should probably be using @change instead of @click here for checkboxes.