Column group headers row-span

Posted by: chris.jones on 19 August 2021, 10:32 pm EST

  • Posted 19 August 2021, 10:32 pm EST

    Is it possible to set a row span on column group headers? e.g Replace the "getDeeperColumnGroups" function in https://www.grapecity.com/wijmo/demos/Grid/Columns/ColumnGroups/purejs example with:

    // slightly different column groups
    export function getDeeperColumnGroups() {
    return [
    { header: 'Test', columns: [
    { binding: 'name', header: 'Name', width: 150 },
    { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
    ]
    },
    { header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: [
    { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 },
    { binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 },
    {
    header: 'Detail', align: 'center', columns: [
    { binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 },
    { binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 },
    ]
    },
    { binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClassAll: 'highlight' },
    ] },
    { header: 'Perf', align: 'center', columns: [
    { header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: [
    { binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClassAll: 'highlight' },
    { binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 },
    ] },
    { header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: [
    { binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 },
    { binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'highlight' }
    ] },
    ] },
    ];
    }

    You will see that "Test" header occupies two rows and "Name" and "Currency" occupy one. I want my "Test" header to only occupy one row and "name" and "currency" to occupy two rows. This is because my real-world my column labels are quite long so I need the extra real-estate.

    Is there any way to configure it in this way?
  • Marked as Answer

    Replied 23 August 2021, 2:30 pm EST

    Hi,

    To achieve the desired layout you may use the mergeManager property of the FlexGrid and extend its class to re-write your custom merging. I have created a sample demonstrating the same. Please refer to the sample link below for reference:

    https://stackblitz.com/edit/js-1ruhux

    Also, if you wish to show long texts inside the header you may use the wordWrap property of row to wrap long text.

    Let us know if that's works for you.

    Regards,
    Ashwin
  • Replied 30 August 2021, 7:00 pm EST

    Thanks Ashwin. Thats working great.

    Regards
    Chris
  • Replied 3 September 2021, 12:56 am EST

    hi Ashwin,

    Having looked at this again, it doesnt really work very well. It looks fine initially but the code is just faking the row-span by overriding the display. The actual functionality of the column-group still thinks the original layout is in place. e.g. when I drag the "cash" column, it does not recognise the modified display and shows the wrong drop highlight blue lines based on the original display. It also does not let me drag and drop the manually merged cells. I am sure that there are probably other issues. I think it needs a solution to actually override the column-group functionality rather than just fudge the display.

    regards
    Chris
  • Replied 5 September 2021, 5:35 pm EST

    Hello,

    We apologize, but as per your requirement the default Column Groups doesn't support that merging, so to provide you custom merging this is a workaround that we can provide you for now. As the mergeManager merges the cells based on the data, first you need to change the cells data accordingly. You can also prevent dragging on columnHeaders in order to preserve the merging.

    Regards
  • Replied 8 September 2021, 10:14 pm EST

    Thanks for the info. In case anyone is interested, I have found another (maybe better) workaround. By creating a dummy hidden column with another dummy column inside it, name and currency headers then occupy two rows instead of one.
    {
    header: 'Test',
    columns: [
    { binding: 'name', header: 'Name', width: 150 },
    { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
    { binding: 'dummy', visible: false,
    columns: [
    { binding: 'dummy', visible: false }
    ]
    }
    ]
    },

    regards
    Chris
  • Replied 9 September 2021, 3:20 pm EST

    Hello,

    Thank you for sharing your approach, I'm sure this will help others as well.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels