Grid cell vertical alignment flex breaks ellipsis

Grid cell vertical alignment flex breaks ellipsis

Posted by: brijeshkumar.marand on 28 August 2023, 2:17 pm EST

• 

  brijeshkumar.marand

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 August 2023, 2:17 pm EST - Updated 28 August 2023, 3:57 pm EST

  I have tried the example from wijmo doc for vertical alignment
  
  https://www.grapecity.com/wijmo/demos/Grid/Styling/VerticalAlignment/angular

  disaply:flex is interfering with the ellipsis behavior. It clips the cell content without ellipsis. It can be reproduced by changing the width of any column to make it smaller, we no longer get the ellipsis. If the display:flex css is removed it shows the ellipsis but then we lose vertical alignment.

  Can someone please help with this?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2023, 10:45 pm EST

  Hi,

  For getting the ellipsis, please use the formatItem event of FlexGrid and wrap each and every cell (or required cells) in a span with a custom CSS class.

  Please refer to this code snippet for reference:

   handleFormatItem(sender: wjGrid.FlexGrid, args: wjGrid.FormatItemEventArgs) {
          args.cell.innerHTML = `<span class="actual-text">${args.cell.innerHTML}</span>`;
      }

  Then please set the following CSS for the span in the CSS file:

  .actual-text{
      text-overflow: ellipsis;
      overflow: hidden;
  }

  Please refer to this API reference for more information on formatItem event: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#formatitem

  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/Y9Q5_klWTkyb2w6qz79uww/

  Regards,
  
  Anirudh

• 

  brijeshkumar.marand

  • Post Options:
  • Link
    Copy

  Posted 30 August 2023, 6:30 pm EST

  Thanks Anirudh for your response.

  Adding custom cell just for ellipsis doesn’t sound great, especially, when it is the default behavior.
  
  Can you help us with getting the vertical alignment without having to add display:flex since that looks like the primary culprit here?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2023, 5:34 pm EST

  Hi Brijesh,

  To achieve the functionality of vertical alignment and ellipses we need to wrap the text of the cell in a child element.

  Another approach to vertically align the content without using flex is to use the transform property of CSS but, this also requires that the cell content must be wrapped in a div.

  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/zWOO__Xue0y2--lc3ctL4w/

  In case, you face any issues while using this approach feel free to contact us.

  Thank you for your understanding.

  Regards,
  
  Anirudh