CODEWITHSUNDEEP
javascriptreactjsag-grid
Asking
Asking

Reputation: 4200

Disable movement of columns in agGrid

I'm using AgGrid table in my application. Here is the demo. According to the documentation i want to stop movement of the columns. For this i used:

suppressMovable: true

The above code I used here:

 columnDefs: [
        {
          headerName: 'Athlete',  //the generic name of header
          children: [
            {
              field: 'athlete',   //children header from generic header
              width: 150,
              suppressMovable:true
            },
            {
              field: 'age',
              lockVisible: true,
              cellClass: 'locked-visible',
              suppressMovable:true

            },
            {
              field: 'country',
              width: 150,
            },
            { field: 'year' },
            { field: 'date' },
            { field: 'sport' },
          ],
          ...

suppressMovable:true, it works, and the athlete and age columns aren't possible to be moved like others, but this code also disable the movement of the main column: Athlete. So when i try to switch the place of Athlete and Medals columns, i can't, but i don't want this, i want to set this 2 main columns as movable.
Question: How to disable movement of columns inside the Athlete and Column, but to keep the movement functionality of these 2 main columns?

Upvotes: 7

Views: 14410

Answers (3)

Malaji Nagaraju
Malaji Nagaraju

Reputation: 151

I used onColumnHeaderMouseOver grid event to activate suppressMovable when column.isColumn is true.

example:


function toggleMovable(event: ColumnHeaderMouseOverEvent){
 // retrive all col defs
 const gridColDefs = event.api.getColumnDefs();

 // update coldefs for child columns
 const updatedColDefs = gridColDefs?.map((colDef)=> colDef?.groupId=== undefined ? 
  colDef : 
   {
    ...colDef,
    children: colDef.children.map((childColDef)=>({...childColDef, suppressMovable:event.column.isColumn}))
   })

  // used lodash isEqual function to compare equality
  if(!isEqual(gridColDefs, updatedColDefs){
    event.api.setGridOption('columnDefs', updatedColDefs)
  }

}

This function will get trigger on hover of column group header. Which will make column movable.

Upvotes: 0

Tabares
Tabares

Reputation: 4335

You can use the follow properties to lock the drag and drop behavior: lockPosition and suppressMovable: true.

const [columnDefs, setColumnDefs] = useState([
  {
    field: 'athlete',
    suppressMovable: true,
    cellClass: 'suppress-movable-col',
  },
  { field: 'age', lockPosition: 'left', cellClass: 'locked-col' },
  { field: 'country' },
  { field: 'year' },
  { field: 'total', lockPosition: 'right', cellClass: 'locked-col' 
},
]);
const defaultColDef = useMemo(() => {
   return {
     flex: 1,
     lockPinned: true, // Dont allow pinning for this example
   };
  }, []);

Sample in plunker Documentation

Upvotes: 1

sandeep joshi
sandeep joshi

Reputation: 2151

Out of the box answer is you can't.

If any child is fixed, then AG Grid doesn't allow moving the group.

you can write custom event listener(if possible) to change the suppressMovable property of child columns while the parent column is being dragged and then again set them to not movable/suppressMovable to true. else you can programatically move all columns in a group using moveColumnByIndex(from,to)

Upvotes: 1

Related Questions