Embed JavaScript Data Grid - Master / Detail with ag-Grid

AG Grid Enterprise has the ability to render grids within grids. This allows you to expand parent rows to show child tables of data, these can be fully customised with different formatting based on the parent row data.

The ability to embed or nest grids within grids makes complex data layout simple without having to create complex HTML table layouts.

00:00 Intro
00:07 Enabling Master/Detail
02:12 Accessing Detail Grid API
04:09 Syncing Detail Scrolling with Master
04:33 Overriding the Default Detail Cell Renderer
05:58 Providing a Custom Detail Cell Renderer
09:20 Providing a Custom Detail Cell Renderer - Form
10:26 Configure Grid per Row
11:42 Dynamically Specify Master Nodes
12:50 Nesting Master Detail
14:00 Detail Row Height
15:41 Filtering and Sorting
16:10 Lazy Load Detail Rows
16:57 Keeping Detail Rows
18:38 Changing Data & Refresh
19:43 Exporting Master / Detail Data
23:34 Outro

AG Grid is available as a free community edition and commercially as an Enterprise product (full support and more features). AG Grid works with React, Angular, Vue, and JavaScript.

[agGrid]

- available as a free community edition and commercially as an Enterprise product (full support and more features).
- works with React, Angular, Vue, and JavaScript.

[SheryarShirazi]

@ag-Grid Is there any configuration to add expand button to an another column or customise it with cell renderer?

[malikbrahimi]

@ag-Grid Why is it the full demo on the ag-Grid website has nice custom scrollbars but none of the other examples do?

[rembautimes]

Very good video, time to budget in AG Grid

[tejap]

Is there a way to add detail grid to more than one column. We need to show different detail grid based on column

[MikeGledhill]

Thank you... this is a *really* useful video.
However, I have a serious love-hate relationship with agGrid. Their website (deliberately?) doesn't let you make comments or ask questions on the pages describing each function, and their examples usually side-step important issues.
One of the many issues I have is dynamically setting the rowHeight for detail grids.
Your example pulls the same trick as the examples on the agGrid website... your detail grid's data is *already* preloaded. In a real-world situation, this would never happen. You would load the detail grid's data from a server when the user clicks on a row, and *then* want agGrid to set the parent's row height based on how many items were just loaded... but you can't do this.

I did try your trick of using setDomLayout('autoHeight'), both in the onGridReady, and after dynamically loading the data from my server, but the rowHeight still ends up being (exactly) 300 pixels.

[rajeshnaika]

hi, Params not refreshed in cellRendererFramework.

the component used for cellRendererFramework is calling only on the initial load. when data source changes, it is not updating the table until you hard refresh,

How I can achieve this, nowhere I am finding the solution for this

[sunnyveins]

Is that possible I can export this grid data as shown on the grid. Either it is collapsed or expanded ?

[sharmilamalik]

Hi i am trying to programmatically set detail row to selected but it's not happening can u please assist me on this..

[SrikrishnaGumma]

How can I make detail grid dynamically loaded only when expanded for each row

[ushawadhwani]

can u share the plunker link? or git repository for the same?

[avirupchakraborty]

sizeColumnsToFit(); this function is not apllicable for master/details isnot it?

[hussainraja]

can we edit data in master detail grid? is this possible?

[radhikashravgi]

Detail row height is not working for me

[ahmetbarsgunaydn]

You guys really need much deeper documentation...

[shivshankar]

These guys only show easy things, they don't tell what we want, how to add columns for adding buttons in crud operations