Creating Column Header without Row

Creating Column Header without Row

Posted by: germiep.fernandez on 10 December 2021, 6:46 am EST

• 

  germiep.fernandez

  • Post Options:
  • Link
    Copy

  Posted 10 December 2021, 6:46 am EST - Updated 3 October 2022, 12:14 pm EST

  Hi,

  I am trying to create a column like this using Multirow and Cell Templates:
  
  

  my code is

  
  <wj-multi-row-cell-group>
            <wj-multi-row-cell [colspan]="2" [header]="'Test'" [minWidth]="250"></wj-multi-row-cell>
            <wj-multi-row-cell [header]="'Test'" [minWidth]="200"></wj-multi-row-cell>
            <wj-multi-row-cell [header]="'Test'" [minWidth]="100"></wj-multi-row-cell>
  </wj-multi-row-cell-group>
  
  

  and when I tried running it, it look like this:
  
  

  is there any way to remove the row for the Column 1? I tried adding the Column 1 to the multi-row-cell-group header but it is not showing as column.

  Sorry for the question, I just started using wijmo.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 13 December 2021, 9:52 am EST

  Hello,

  Sorry but removing the 1st column rows wouldn’t be recommended, the output result is expected behavior. As per your shared image, you just want a custom header layout, if so then you may use the headerLayoutDefinition property of the multiRow to provide a custom header layout as per your requirement. Also, you can provide a different data row layout than the header layout. Please refer to the following links below for more information:

  To read more about multiRow layout:
  
  https://demos.wijmo.com/5/PureJS/MultiRowIntro/MultiRowIntro

  headerLayoutDefinition API link:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_grid_multirow.multirow.html#headerlayoutdefinition

  Custom headerLayoutDefinition demo link:
  
  https://www.grapecity.com/wijmo/demos/Grid/MultiRow/CustomColumnHeaders/vue

  Regards