Draggable Grouping doesn't work

Describe the bug

Dragging headers doesn't work. When I try to drop the header to the preheader field, it doesn't do anything. Nothing was dropped in the field.

When I tried to programmatically group by calling this.draggableGroupingPlugin.setDroppedGroups(['<columnID>']); it also doesn't work. Debugging from the library shows that gridColumn length is 0.

As you can see here, i have a set of columns displayed in the browser. but in the code, it says gridColumn is 0.

Reproduction

Ive been using this library to dynamically display tables with each contains a unique set of columns and dataset.

So after displaying/rendering the slickgrid component, user can choose a preset of table (with its own column and dataset). and i call this.dataView.refresh(); to refresh the dataView showing all the new sets of columns and dataset in the slickgrid component.

When rendered, I tried dragging, but nothing happened. Then programmatically grouping doesn't work too. See describe the bug section above for details

Environment Info

Angular 13.2
angular-slickgrid "^4.2.1"
typescript "~4.5.5"

Validations

Follow our Code of Conduct
Read the HOWTO - Step by Step.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

As far as I can see the Example 19 demo is working fine and grouping by button clicks is also working as expected. So unless you can provide a full repro I'm going to have to close this. Note that for the Draggable Grouping to work, it requires a grouping property defined for each column you want to allow grouping, this is a major difference versus the regular grouping (without draggable)

Angular-Slickgrid/src/app/examples/grid-draggrouping.component.ts

Lines 75 to 90 in c8ae07d

    
           { 
        
             id: 'title', name: 'Title', field: 'title', 
        
             width: 70, minWidth: 50, 
        
             cssClass: 'cell-title', 
        
             filterable: true, 
        
             sortable: true, 
        
             grouping: { 
        
               getter: 'title', 
        
               formatter: (g) => `Title: ${g.value}  <span style="color:green">(${g.count} items)</span>`, 
        
               aggregators: [ 
        
                 new Aggregators.Sum('cost') 
        
               ], 
        
               aggregateCollapsed: false, 
        
               collapsed: false 
        
             } 
        
           },

I would suggest you clone the Angular-Slickgrid-Demos to test this feature. The demos are working as expected and there are plenty of Cypress E2E tests to cover most features as well

Okay thank you will try

	{
	id: 'title', name: 'Title', field: 'title',
	width: 70, minWidth: 50,
	cssClass: 'cell-title',
	filterable: true,
	sortable: true,
	grouping: {
	getter: 'title',
	formatter: (g) => `Title: ${g.value} <span style="color:green">(${g.count} items)</span>`,
	aggregators: [
	new Aggregators.Sum('cost')
	],
	aggregateCollapsed: false,
	collapsed: false
	}
	},