Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
MultiColumnHeader with Row colspan


we have requirement the Grid should have MultiColumn Header and conditionally apply the colspan for some of the Rows data.

I am constructing the IgGrid Jquery

Here i am attaching the requirement screen shot.

Please share the answer with some sample code.

Please let me know incase of any other information required.

Thank you

Parents Reply
  • 17550
    Offline posted in reply to Sam Azpan

    Hello Sam,

    Thank you for posting in our community.

    By design, Multi-Column Headers feature is configured on initialization phase of igGrid, in the columns collection. There is an option of each columns object called group which contains an array of other column definitions. The group option is cascading. Which means that you can group multi-column headers together. As you may notice in our API documentation, there is only a get method for group option. More about configuring Multi-Column headers can be found here.

    However, what I can suggest in case that you would like to change the groups, is changing the entire columns collection of the grid. For example, you can modify the existing columns collection so that it reflects the changes for groups or directly replace columns collection with a new one .

    $("#gridProducts").igGrid("option", "columns", columnsModified);

    Attached you will find a small sample which changes columns collection upon a button click.

    In regards to the screenshot provided, I assume that you would like to use Grouping feature along with Multi-Column Headers. At this point, features that can be used in combination with Multi-Colum headers are:

    • Hiding
    • Resizing
    • Column Moving

    All other feature integrations could be considered a product idea. More about the supported features could be found here.

    At this point, igGridExcelExporter supports reflecting data and layout manipulations caused by the igGrid`s Filtering, Hiding, Paging, Sorting, Summaries and Column Fixing features. A small sample illustrating how this can be achieved is available here.

    However, I noticed that a similar questions has been discussed here, where a possible workaround is suggested. I believe you will find this information useful.

    Please let me know if you need any further information regarding this matter.

No Data