Posted 10 December 2021, 2:13 pm EST - Updated 3 October 2022, 3:10 am EST
Creating Complex Multirow Header Column
Posted by: maricar.m.clariza on 10 December 2021, 2:13 pm EST
-
maricar.m.clariza
-
sharad.tomer
Posted 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.jsRegards
Sharad -
maricar.m.clariza
Posted 14 December 2021, 8:53 pm EST
Im using angular btw
-
sonu.pandey
Posted 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
-
maricar.m.clariza
Posted 20 December 2021, 6:50 pm EST - Updated 3 October 2022, 3:10 am EST
hmm follow up question… how am I supposed to add up forms on record?
see image provided.thanks in advance
-
sonu.pandey
Posted 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#editorDemo 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
-
maricar.m.clariza
Posted 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…
-
sonu.pandey
Posted 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
-
maricar.m.clariza
Posted 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?
-
sonu.pandey
Posted 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
-
maricar.m.clariza
Posted 28 December 2021, 12:27 pm EST
can you give sample code on how to implement the cell templates for the said table structure?
-
sonu.pandey
Posted 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
-
maricar.m.clariza
Posted 7 January 2022, 8:17 pm EST - Updated 3 October 2022, 3:10 am EST
hi sonu.pandey,
hmm… what if there are some group headers that doesnt have groupHeaders? shown? see screenshot provided
-
sonu.pandey
Posted 10 January 2022, 2:43 am EST
Hello,
-
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.
-
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
-
-
maricar.m.clariza
Posted 10 January 2022, 3:20 am EST - Updated 3 October 2022, 3:10 am EST
^ i was trying to implement the mergeManager on the header but its not working
-
maricar.m.clariza
Posted 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' }, ], },];
} -
sonu.pandey
Posted 10 January 2022, 3:58 pm EST
Hello,
-
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.
-
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.
-
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
-
-
maricar.m.clariza
Posted 10 January 2022, 4:03 pm EST
whaaaaa I got it now! thanks much sondu
-
maricar.m.clariza
Posted 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.”
-
sonu.pandey
Posted 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
