I am new to ag-grid and have run into some issues that I can't seem to find solution of. I hope people here will able to help. So here we go.
ag-grid version: community edition
java script framework: vue js
Background:
I got JSON data and its structure is as follows
project
project_number
applicants:
First_name
Last_name
Now a project can multiple applicants. In ag-grid I have multiple column groups such that ag-grid looks like
Project Applicants
Project_Number Total | First_Name | Last_Name
Above, Total column only gets displayed when column group is closed and it shows the number of applicants for a project.
For applicants I have got cell Rendered which shows values depending upon the column. For total it display the length of an array i.e. number of applicants and for first_name and last_name it shows concated values of full_name in an array and does the same the thing for last_name.
Code:
colDef= [{
headerName: 'Project_Name',
field: 'Project_Name'
},
{
headerName: 'Applicants',
marryChildren: true,
children: [{
headerName: 'Total',
columnGroupShow: 'closed',
cellRenderer: fnCellRenderer,
autoHeight: true
},{
headerName: 'First_name',
columnGroupShow: 'open',
cellRenderer: fnCellRenderer,
autoHeight: true
},
{
headerName: 'Last_Name',
columnGroupShow: 'open',
cellRenderer: fnCellRenderer,
autoHeight: true
}]
}]
fnCellRenderer = function(params){
let colDef = params.colDef;
let fieldName = colDef['field'];
let cellValue = params.value;
if(fieldName === 'Total'){
return `<span ><u>${cellValue.length}</u></span>`;
}else if (cellValue.length){
let templateString = '';
for(let value of cellValue){
let fieldValue = value[fieldName];
if(fieldValue){
templateString = templateString + fieldValue + '<br/>';
}
}
return templateString
}else{
return '';
}
}
rowData: [{ project_number: '1', applicants:[{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' }] }]
Problem statement:
1) How do I center cell content. I can get center horizontally working but I can't get vertically working.
2) The row height of Total column is quite big even when column group is close. It row height seems to equal as if column group is open. What I want is that row height should adjust when column group is open.
I tried api.resetRowHeights() in column group open and close event handler but it doesn't seems to be working. Code and image below.
<ag-grid-vue class="ag-theme-material grid"
:gridOptions="gridOptions"
v-bind:rowData="rowData"
enableSorting="true"
enableFilter="true"
enableColResize="true"
:columnGroupOpened="columnGroupOpened">
</ag-grid-vue>
columnGroupOpened: function(params){
this.gridOptions.api.resetRowHeights();
}
Please guide.
Regards, Ajay
