How to rowSpan and allow drag per group in ag-grid angular

ngOninit() {}

getMasterColumnDefs() {
return [
{
headerName: 'Step', field: 'positionSeq', pinned: 'left', rowDrag: true, rowSpan: this.rowSpan.bind(this)
},
{ headerName: 'Student', field: 'studentId', width: 150 },
];
}

onGridReady(params: any) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;

const steps = this.form.steps;
if (steps && steps.length > 0) {
this.masterRowData = this.updateSteps(steps);
console.log('Master Row Data: ',this.masterRowData);
console.log(JSON.stringify(this.masterRowData));
}
}
updateSteps(steps: any[]) {
const uniquePositionSeq = new Set<string>();

const updatedSteps = steps.map(item => {

const positionSeq = item.step.toString();
if (uniquePositionSeq.has(positionSeq)) {
delete item.positionSeq;
} else {
uniquePositionSeq.add(positionSeq);
item.positionSeq = positionSeq;
}

return item;
});

return updatedSteps;
}


What I'm trying to do here is to rowspan the step per position. here's what I tried

``

const rowSpan = (params) => {
const positionSeq = params.data ? params.data.positionSeq : undefined;
const step = params.data ? params.data.step : undefined;
const gridData = this.masterRowData || [];
return gridData.filter((item) => item.step === Number(positionSeq)).length;
} ```


But when I try to run it didn't rowSpan also the drag didn't work it should drag based on the positionSeq selected and it should not multiple drag based on positionSeq



Continue reading...