CODEWITHSUNDEEP
ag-grid
Driond
Driond

Reputation: 113

how do I make a subgrid inside an ag-grid?

I would like to be able to open an other ag-grid (subgrid) in my main ag-grid after clicking a row button. However, after searching for several hours in forums and ag-grid docs, I can't seem to find a way of making the subgrid appear. Here is an example of how I would like my grid to behave:

subgrid desired behaviour example with dhtmlxGrid

Is there any way this can be done with ag-grid? How?

Upvotes: 5

Views: 12114

Answers (2)

Vanderci Curvelo Junior
Vanderci Curvelo Junior

Reputation: 172

I supose you want to use a nested ag grid

https://www.ag-grid.com/javascript-grid-master-detail-detail-grids/

This small piece is what u need to render a grid inside your grid

   <AgGridReact
      modules={[
        ClientSideRowModelModule,
        MasterDetailModule,
        MenuModule,
        ColumnsToolPanelModule,
      ]}
      masterDetail={true}
      detailCellRendererParams={{
        detailGridOptions: {
          columnDefs: [
            { field: 'callId' },
            { field: 'direction' },
            {
              field: 'number',
              minWidth: 150,
            },
            {
              field: 'duration',
              valueFormatter: "x.toLocaleString() + 's'",
            },
            {
              field: 'switchCode',
              minWidth: 150,
            },
          ],
          defaultColDef: { flex: 1 },
        },
        getDetailRowData: function (params) {
           //callRecords here is any data u want to render
          params.successCallback(params.data.callRecords);
        },
      }}

Upvotes: 0

Jarod Moser
Jarod Moser

Reputation: 7348

I suppose you are talking about something like this. I found it under the section Full Width Rows & Master Detail and scrolling all the way to the bottom

Upvotes: 2

Related Questions