1
votes

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

https://plnkr.co/edit/12COBiJpn6eXPo71ojmE?p=preview

1
in your plunkr you reference ag-grid version 2.3.5 (not enterprise) which is really old. Master/detail is only available from v14.2 on - Arikael

1 Answers

0
votes

Master/Detail is an enterprise feature. You need to pay for that feature if you want to use the masterDetail gridOptions parameter. You would also need to pull in the enterprise version of the ag-grid.js file.