Row Height in FlexGrid

Row Height in FlexGrid

Posted by: matth on 20 September 2017, 8:19 am EST

• 

  matth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 September 2017, 8:19 am EST

  If I do word wrap, you would figure that the row height would be automatically impacted when the cell’s content wraps! But it doesn’t!

  Please, how do you have the height of the rows automatically bound to the largest height of the cells?

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 4:08 pm EST

  Hi Matth,

  Refer this code

  
  @(Html.C1().FlexGrid<PopupStock>()
      .Id("grid")
      .Bind(Model)
      .AutoGenerateColumns(true)
      .AutoSizeMode(AutoSizeMode.Both)
  )
  
  <script type="text/javascript">
  c1.documentReady(function () {
      grid = wijmo.Control.getControl('#grid');
      grid.autoSizeRow(-----------rowindex----------, true);
  });
  </script>
  
  

  Refer the document here:
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#autoSizeRow

  Auto sizing row would adjust the height of cell.

  ~nilay

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 25 September 2017, 9:31 pm EST

  I tried grid.autoSizeRows(); and found that it is not performant. Is there an efficient way to just set the row height either by default or a way to virtualize the sizing of the rows?

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 26 September 2017, 8:42 pm EST

  Hi,

  I tried grid.autoSizeRows(); and found that it is not performant

  autoSizeRows calculates and resize every single row. A better option would be filter out when and for which row this auto size should trigger. You can try something like this:

  
  <script>
  var cs1grid = {};
  c1.documentReady(function () {
          cs1grid = wijmo.Control.getControl("#ovFlexGrid");
  });
      function OnCellEditEnded(s, e) {
          AutoSizeIfOverFlown(e.row, e.col);
      }
      function OnClientPastedCell(s, e) {
          AutoSizeIfOverFlown(e.row, e.col);
      }
  
      function AutoSizeIfOverFlown(row, col) {
          var element = cs1grid.cells.getCellElement(row, col);
          if (element.scrollHeight > element.clientHeight) {
              cs1grid.autoSizeRow(row, true)
          }
          if (element.scrollWidth > element.clientWidth) {
              cs1grid.autoSizeColumn(col, true)
          }
      }
  </script>
  @(Html.C1().FlexGrid<Sale>()
      .Id("ovFlexGrid")
      .AutoGenerateColumns(true)
      .Bind(Model)
      .CssClass("grid")
      .OnClientCellEditEnded("OnCellEditEnded")
      .OnClientPastedCell("OnClientPastedCell")
      .OnClientSelectionChanged("csFlexGrid_SelectionChanged")
  )
  
  
  

  ~nilay

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 10:51 am EST

  No, not quite. OnCellEditEnd? OnClientPastedCell? Neither of those events is applicable in the context of my application. Is there an event for scroll into view? That would fit more adequately with my request. Surely there is a more appropriate way to have WordWrap display the full content of the cell! Especially without all of this hassle.

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 11:03 am EST

  Another thing to point out is your syntax appears to not be correct. I was only able to get your code to work by revising the following:

  function AutoSizeIfOverFlown(row, col) {
          var element = cs1grid.cells.getCellElement(row, col);
          if (element.scrollHeight > element.clientHeight) {
              cs1grid.autoSizeRow(row);
          }
          if (element.scrollWidth > element.clientWidth) {
              cs1grid.autoSizeColumn(col);
          }
      }
  

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 11:04 am EST

  But I still would prefer to passively apply this in a virtualized manner, where the content is only auto-sized during a scroll rather than per click. I have implemented the per click for the time being just to get something that works for our customer.

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 11:43 am EST

  Another thing to note for anyone looking for a solution similar, using the provided code is not extendable to any other grid. I recommend something like this instead:

  function csFlexGrid_SelectionChanged(s, e) {
          AutoSizeIfOverFlown(s, e.row, e.col);
      }
  
      function AutoSizeIfOverFlown(sender, row, col) {
          var element = sender.cells.getCellElement(row, col);
          if (element.scrollHeight > element.clientHeight) {
              sender.autoSizeRow(row);
          }
      }
  

  This way you can subscribe to the selection changed event from any grid to this function and it will fire for each.

  Component One, please do provide a viable solution to automatically firing an event for items that scroll into view. I believe that would be the appropriate solution.

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 22 October 2017, 8:05 pm EST

  Thanks,
  
  Good updates.