Prevent Cells from Merging Vertically in FlexGrid

Prevent Cells from Merging Vertically in FlexGrid

Posted by: joe on 25 June 2018, 5:21 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 25 June 2018, 5:21 pm EST

  Hi,

  I’m merging cells in a grid and it’s working well. However, I want to prevent cells from merging across row (merging vertically). I only want cells to merge within the same row. I’ve looked at the sample code for a custom mergeManager and I’m simply not getting what I need to do. Help a simple brain!

  Thanks!

  Joe

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 25 June 2018, 7:56 pm EST

  I’m using a flexgrid to format data for export to excel. I do not display the grid to the user. I put formatted data into the grid then export it using wijmo.grid.xlsx.FlexGridXlsxConverter.save().

    
  <div style="display: none">  
      <wj-flex-grid id="invoiceXLSXExportGrid" class="grids" itemsSource=customExportStructure>			
  																		</wj-flex-grid>
  </div>
  
  

  When the

  is visible (during testing so I can see what’s happening on the grid) the excel export matches the data and styling of the flexgrid. However, when I set the

  's display to none (hiding the grid) horizontal cell merging in the excel export disappears. Vertical merging remains (and I want to get rid of it…see my previous post on this thread).

  The grid is configured as follows:

    
  var configureExportGrid = function () {
      invoiceExportGrid = new wijmo.grid.FlexGrid('#invoiceXLSXExportGrid', {
        itemsSource: customExportStructure,
        autoGenerateColumns: true,
        columns: [
          { binding: 'col0.data', header: 'col0', width: 20 },
          { binding: 'col1.data', header: 'col1', width: 210, allowMerging: true },
          { binding: 'col2.data', header: 'col2', width: 210, allowMerging: true },
          { binding: 'col3.data', header: 'col3', width: 210 }
        ],
        isReadOnly: true,
        allowMerging: wijmo.grid.AllowMerging.Cells,
        headersVisibility: 0
      });
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 June 2018, 9:59 am EST

  Hi,
  
  If you want the cell to merge only horizontally then you need to set the allowMerging property of rows to true.
  
  Similarly, to merge cells vertically, we need to set the allowMerging property of columns to true.

  So if we modify your code snippet and remove allowMerging from column definition and add it to rows then it should work perfectly.
  
  Please refer to following code snippet

  invoiceExportGrid = new wijmo.grid.FlexGrid(document.createElement('div'), {
        itemsSource: customExportStructure,
        autoGenerateColumns: false,
        columns: [
          { binding: 'col0.data', header: 'col0', width: 20 },
          { binding: 'col1.data', header: 'col1', width: 210 },
          { binding: 'col2.data', header: 'col2', width: 210 },
          { binding: 'col3.data', header: 'col3', width: 210 }
        ],
        isReadOnly: true,
        allowMerging: wijmo.grid.AllowMerging.Cells,
        headersVisibility: 0
      });
  [b]invoiceExportGrid.rows.forEach(row=>{
     row.allowMerging=true;
  });[/b]
  

  You can also refer to the following sample which implements the same:-
  
  [b]https://stackblitz.com/edit/angular-jcaqna?file=app%2Fapp.component.ts[/b]

  P.S. If you are creating grid without the intent to display UI then please consider passing an HTMLDivElement instance(not yet attached to document) to FlexGrid constructor.

  ~Manish