I am attempting to implement some sort of master detail functionality with Ag-grid. I want a row to be expandable as the master detail suggests but do not want a nested table in the detail cell ( just some custom html).
I am having trouble setting this up and cannot seem to even get my grid to allow for expanding rows. I am using aurelia but have created a simple plunkr that show my setup.
Note that my detailCellRendererParams only contains a template, since I do not want a table. In grid options I have set masterDetail: true.
var detailCellRendererParams = {
template: function(params) {
var personName = params.data.name;
return (
'<div style="height: 100%; background-color: #EDF6FF; padding: 20px; box-sizing: border-box;">' +
' <div style="height: 10%;">Want some html template in here with no data table ' +
"</div>" +
' <div ref="eDetailGrid" style="height: 90%;"></div>' +
"</div>"
);
}
};
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
enableColResize: true,
enableFilter: true,
masterDetail: true,
detailCellRendererParams: detailCellRendererParams
};
Please could you take a loot at my plunkr and try to identify what I am missing in order to get the expandable details cell for each row.
Thanks