Creating Complex Multirow Header Column

Posted by: maricar.m.clariza on 10 December 2021, 2:13 pm EST

  • Posted 10 December 2021, 2:13 pm EST

    Hi guys,
    Would like to ask for you assistance or idea on how to resolve this. I am currently working on a challenging multirow column header. Attached below is the what should be the table header column looks like.

  • Replied 13 December 2021, 5:47 am EST

    Hi,

    You may refer to the following sample which demonstrates how you could achieve the required functionality:
    https://codesandbox.io/s/wijmo-starter-forked-145pd?file=/src/index.js

    Regards
    Sharad
  • Replied 14 December 2021, 8:52 pm EST

    Woow thanks... :)


    ^ another thing ... How to remove the those first row cells for each record?
    tia!
  • Replied 14 December 2021, 8:53 pm EST

    Im using angular btw :)
  • Replied 16 December 2021, 12:21 am EST

    Hello,

    You can update the layoutDefinition property of the multiRow to get the layout as per your requirement. Please refer to the sample link below demonstrating the same(in angular):

    https://stackblitz.com/edit/angular-phcyjy?file=src%2Fapp%2Fapp.data.ts

    You can also refer to the layoutDefinition API for more information: https://www.grapecity.com/wijmo/api/classes/wijmo_grid_multirow.multirow.html#layoutdefinition

    Regards
  • Replied 20 December 2021, 6:50 pm EST

    hmm follow up question.. how am I supposed to add up forms on record?
    see image provided.

    thanks in advance :)
  • Replied 21 December 2021, 9:58 pm EST

    Hello,

    As per our understanding, you want to use the dropDown, text fields like input control in the cells of any column, if so then you may use the editor property to bind the input control to the multiRow column cells. Also, you need to bind your data to the controls in order to display the right content. For more information on editor property, you can refer to the link below:
    https://www.grapecity.com/wijmo/api/classes/wijmo_grid.column.html#editor

    Demo link: https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/purejs

    You can also refer to the sample demonstrating the same: https://stackblitz.com/edit/angular-vujfwg?file=src%2Fapp%2Fapp.data.ts

    If it doesn't match your requirements then please let us know some more information on the exact requirements here.

    Regards
  • Replied 21 December 2021, 10:11 pm EST

    This is somehow correct how ever as for the headers its should be 4 rows but the rows per record should be 3..
  • Replied 21 December 2021, 10:12 pm EST

  • Replied 22 December 2021, 11:01 pm EST

    Hello,

    As per our understanding, you want to show all the columnHeaders but hide the corresponding row of the first columnHeader if so then you may set the collapsedHeaders to null in order to show all the columnHeaders. Please refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/angular-ni6hqq?file=src%2Fapp%2Fapp.component.html

    Regards
  • Replied 22 December 2021, 11:55 pm EST

    @sonu.pandey

    Im just wondering is there a way I can manipulate the table structure using .component.html? instead on the .ts section?
  • Replied 26 December 2021, 11:52 pm EST

    Hello,

    Yes, you can manipulate the structure on the HTML side using the different types of templates defined in Wijmo's MultiRowCellTemplate component. You can refer to the following link below for reference:

    Demo link: https://www.grapecity.com/wijmo/demos/Grid/MultiRow/CellTemplates/angular

    API link: https://www.grapecity.com/wijmo/api/modules/wijmo_angular2_grid_multirow.html

    Let us know if you have further doubts or issues.

    Regards
  • Replied 28 December 2021, 12:27 pm EST

    can you give sample code on how to implement the cell templates for the said table structure?
  • Replied 28 December 2021, 7:51 pm EST

    Hello,

    You may refer to the below sample which demonstrates how you could achieve the required functionality using the templates:

    https://stackblitz.com/edit/angular-uo4fvb?file=src%2Fapp%2Fapp.component.html

    Regards
  • Replied 7 January 2022, 8:17 pm EST

    hi sonu.pandey,
    hmm.. what if there are some group headers that doesnt have groupHeaders? shown? see screenshot provided
  • Replied 8 January 2022, 12:20 am EST



    ^ @sondu.pandey need assistance regarding these parts
  • Replied 10 January 2022, 2:43 am EST

    Hello,

    1. To merge the empty cells into one by extending the wijmo.grid.MergeManager class and assign an object of that type to the grid's mergeManager property. Please refer to the sample link below for reference.

    2. As per your screenshot it would not be possible to create that layout by only providing cell structure layout .i.e. layoutDefinition. Therefore you would be required to provide 2 different layouts, one for the columnHeaders and one for the cell structure. You may use the headerLayoutDefinition property for multiRow to provide a header layout to the multiRow. Please refer to the sample link below demonstrating how to achieve the shared image layout:

    Sample: https://stackblitz.com/edit/angular-srcvgc?file=src%2Fapp%2Fapp.component.html

    Regards
  • Replied 10 January 2022, 2:54 am EST

    Thanks for your response sondu.pandey..
    Question:


    ^ because this part is supposed to me group with C
  • Replied 10 January 2022, 3:20 am EST



    ^ i was trying to implement the mergeManager on the header but its not working
  • Replied 10 January 2022, 4:23 am EST

    would it be possible not to use [collapsedHeaders]="null" <----- on the component.html


    THEN, in the the

    export function getColumnLayout() {
    return [
    {
    header:'',
    colspan:1,
    rowspan:1,
    cells:[
    {
    binding: 'z1',
    header: 'reception',
    colspan: 1,
    rowspan:2
    },
    {
    binding: 'z2',
    header: 'reception date',
    colspan: 1,
    rowspan:2
    }
    ]

    },
    {
    header: 'Visual cload',
    colspan: 2,
    cells: [
    {
    binding: 'a1',
    header: 'Visual Check',
    colspan: 2,
    },
    {
    binding: 'a2',
    header: 'Result of visual check',
    colspan: 1,
    },
    { binding: 'a3', header: 'Person in charge', colspan: 1 },
    {
    binding: 'a4',
    header: 'Comments',
    colspan: 2,
    },
    {
    binding: 'a5',
    header: 'Illustration',
    colspan: 2,
    },
    ],
    },
    {
    header: 'M check',
    colspan: 2,
    cells: [
    { binding: '', header: 'M check', colspan: 2 },
    { binding: 'b2', header: 'Result', colspan: 1 },
    { binding: 'b3', header: 'Person in charge', colspan: 1 },
    { binding: 'b4', header: 'Equipment no', colspan: 2 },
    { binding: 'b5', header: 'Illustration', colspan: 2 },
    ],
    },
    {
    header: 'C Check',
    colspan: 2,
    cells: [
    { binding: '', header: 'C check', colspan: 2 },
    {
    binding: 'c2',
    colspan: 1,
    header: 'test date',
    },
    { binding: 'c3', colspan: 1, header: 'result' },
    { binding: 'c10', colspan: 1, header: 'person in charge' },
    { binding: 'c11', colspan: 1, header: 'Equipment number' },
    { binding: 'c15', colspan: 2, header: 'test file' },

    ],
    },
    {
    header: '',
    colspan: 2,
    cells: [
    { binding: '', colspan: 2, header: '' },
    { binding: 'c20', colspan: 1, rowspan: 3, header: '1 time' },
    { binding: 'c21', colspan: 1, header: 'ng item' },
    { binding: 'c22', colspan: 1, header: 'level' },
    { binding: 'c23', colspan: 1, header: 'Address' },
    ],
    },

    {
    header: '',
    colspan: 2,
    cells: [
    { binding: '', colspan: 2, header: '' },
    { binding: 'c20', colspan: 1, rowspan: 3, header: '2 time' },
    { binding: 'c21', colspan: 1, header: 'ng item' },
    { binding: 'c22', colspan: 1, header: 'level' },
    { binding: 'c23', colspan: 1, header: 'Address' },
    ],
    },

    {
    header: '',
    colspan: 2,
    cells: [
    { binding: '', colspan: 2, header: '' },
    { binding: 'c20', colspan: 1, rowspan: 3, header: '2 time' },
    { binding: 'c21', colspan: 1, header: 'ng item' },
    { binding: 'c22', colspan: 1, header: 'level' },
    { binding: 'c23', colspan: 1, header: 'Address' },
    ],
    },
    ];
    }

  • Replied 10 January 2022, 3:58 pm EST

    Hello,

    1. As mentioned in the previous response you can manipulate the header layout as per your requirement and pass it to the headerLayoutDefinition property of the multiRow. Please check the sample link below for the same.

    2. MergeManager can merge the cells as per the logic defined inside the getMergedRange method and as in the sample it merged the cell as per the same cell data, the empty cells would not be merged with the cell having text. Try to change the UPDATE THIS cell header to "Reception" to see the effects in the sample link below.

    3. Yes, I have updated the sample for the same. Please refer to the sample link below demonstrating the same.

    Sample link: https://stackblitz.com/edit/angular-k3qd3x?file=src%2Fapp%2Fapp.data.ts

    Regards
  • Replied 10 January 2022, 4:03 pm EST

    whaaaaa I got it now! thanks much sondu :)
  • Replied 15 January 2022, 3:12 am EST

    hi sonu I used the CustomMergeManager class however im getting a warning "the "grid" parameter has been deprecated."
  • Replied 16 January 2022, 11:25 pm EST

    Hello,

    The issue was occured due to the grid parameter passed in the super method of CustomMergeManager class. As the parameter has been deprecated, there is no need to pass the grid as a parameter. Please refer to the updated sample link below for reference:

    https://stackblitz.com/edit/angular-vr8t9o?file=src%2Fapp%2Fapp.component.ts


    Regards
Need extra support?

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

Learn More

Forum Channels