CODEWITHSUNDEEP
javascriptangularjsag-grid
Taylor A
Taylor A

Reputation: 91

ag-grid How to drag whole parent column when dragging child column

I have a grid similar to this: Grid with child and parent column headers

ag-grid by default allows you to drag individual child columns (like 'Game Name' or 'Bought') out from the parent column, splitting the parent into two. What I want to do is to disable this behaviour, so that when you try to drag the child column like 'Bought', it will instead drag the whole 'Game of Choice' column and both of its children.

If this is not doable, is there a way to disable dragging of just the children but keep dragging of the parent enabled?

Upvotes: 1

Views: 1336

Answers (1)

koolhuman
koolhuman

Reputation: 1651

You are looking something like below.

https://www.ag-grid.com/javascript-grid-grouping-headers/#grouping-example-with-marrychildren-set

Marry Children

Sometimes you want columns of the group to always stick together. To achieve this, set the column group property marryChildren=true. The example below demonstrates the following:

  • Both 'Athlete Details' and 'Sports Results' have marryChildren=true.

  • If you move columns inside these groups, you will not be able to move the column out of the group. For example, if you drag 'Athlete', it is not possible to drag it out of the 'Athlete Details' group.

  • If you move a non group column, eg 'Extra 3', it will not be possible to place it in the middle of a group and hence impossible to break the group apart.

  • It is possible to place a column between groups (eg you can place 'Extra 3' between the 'Athlete Details' and 'Sports Results').

enter image description here

Upvotes: 2

Related Questions