Reputation: 903
I am using ag grid angular in pivot mode. The problem I am facing is unable to drag and drop columns in Row, value and column areads. I can add columns in these areas from ts file but not from UI with drag and drop. I can take out any column from these areas but not add and column. Here is ag code.
<ag-grid-angular #agGrid
style="width: 90%; height: 500px; margin-top: 30px;"
id="myGrid"
[rowData]="rowData"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[enableColResize]="true"
[enableSorting]="true"
[sideBar]="sideBar"
[defaultColDef]="defaultColDef"
[pivotMode]="true"
[statusBar]="statusBar"
[enableRangeSelection]="true"
enableRowGroup="true"
dragAndDrop =" true"
[animateRows]="true"
(gridReady)="onGridReady($event)"></ag-grid-angular>
Anyone can tell me what I am missing here.
Plunker like for similar issue: https://plnkr.co/edit/xtPbAztpG14bleAF9bgy?p=preview
Upvotes: 1
Views: 6392
Reputation: 903
This answer is for all who are facing same issue... Ag-grid inbuild provide this functionality please refer below...
https://www.ag-grid.com/javascript-grid-side-bar/
Upvotes: 0
Reputation: 838
In ag-grid mode you can not drag and drop the row. However you can make row draggable by adding draggable=true dynamically on mouseover (mouseover) get the cell id through dom and make it draggable.
A simple code would be
// This method is used to handle the drag row functionality in ag-grid. It adds the draggable event to rows in grid.
this.gridOptions.onCellMouseOver = (dragEvent: any) => {
if (dragEvent.event.target && dragEvent.event.target.offsetParent.classList.contains('ag-row')) {
dragEvent.event.target.offsetParent.setAttribute("pdraggable", "data");
dragEvent.event.target.offsetParent.setAttribute("draggable", "true");
//dragStart event needs to be added as firefox is not reading draggable=true without this.
//https://salesforce.stackexchange.com/questions/214613/draggable-true-is-not-working-in-firefox-for-lightning-component
dragEvent.event.target.offsetParent.addEventListener('dragstart', (event: any) => {
event.dataTransfer.setData('data', 'data');
}, true);
this.draggedRow = dragEvent.data;
}
this.draggedRow = dragEvent.data;
};
}
Upvotes: 2