Why I cant drag Header into GroupBy in DhxTreeGrid 9.1.0 pro

Suite and Optimus
#1 
const grid = new dhx.Grid(containerRef.current, {
      type: "tree",
      autoWidth: true,
      resizable: true,
      groupable: true,
      dragItem: "column",
      selection: "complex",
      editable: true,
      root: null,
      group: { order: ["modelType"] },
      rowCss: (row) => (isRowInvisible(row) ? "xd-row-dim" : ""),
      columns: [
        {
          id: "name",
          header: [{ text: "Name" }, { content: "inputFilter" }],
          gravity: 1,
          htmlEnable: true,
          editorType: "input",
          editable: true,
          template: (value, row) => {
            const icon = getIconSrc(row);
            const name = value ?? '';
            const checked = row.__checked ? 'checked' : '';
            return `<div style="display:flex;align-items:center;gap:8px;">
                    <input type="checkbox" data-check="1" ${checked} style="margin:0;cursor:pointer;transform:scale(1.4);transform-origin:left center;" />
                      <img src="${icon}" alt="" style="width:20px;height:20px;display:inline-block;" />
                      ${name}
                    </div>`;
          },
        },
        {
          id: "visibility",
          header: [{ text: "Visibility" }],
          width: 140, 
          htmlEnable: true,
          editable: false,            
          editorType: null, 
          template: (value, row) => {
            const eye = getVisibilityIconSrc(row);
            const clip = getClipIconSrc(row);
            const iconStyle = "cursor:pointer;width:20px;height:20px;background:#fff;border-radius:4px;";
            const eyeImg = `<img src="${eye}" alt="" data-eye="1" style="${iconStyle}" />`;
            const clipImg = clip
              ? `<img src="${clip}" alt="" data-clip="1" style="${iconStyle};" />`
              : '';
            return `<div style="display:flex;align-items:center;justify-content:center;gap:8px;">
                      ${eyeImg}
                      ${clipImg}
                    </div>`;
          }
        },
        {
          id: "modelType",
          readOnly: true,
          editable: false,
          header: [{ text: "Type" }, { content: "selectFilter" }],
          width: 100,
        },
      ],
      data
    });

https://snippet.dhtmlx.com/av2guxwf
in example was the same

#2

Hello @Nguyen_Manh,

Thank you for the provided example. You can group by dragging headers, because you didn’t enable the grouping property, like follows:

    groupable: true,

Here is an updated demo:
https://snippet.dhtmlx.com/g6in82fo

Also, group:true forces grid to have the tree type, so it’s not necessary to manually specify it in the grid config:

Kind regards,