Row Height in FlexGrid

Posted by: matth on 20 September 2017, 5:19 pm EST

  • Posted 20 September 2017, 5:19 pm 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?
  • Replied 26 September 2017, 1:08 am 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
  • Replied 26 September 2017, 6:31 am 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?
  • Marked as Answer

    Replied 27 September 2017, 5:42 am 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
  • Replied 12 October 2017, 7:51 pm 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.
  • Replied 12 October 2017, 8:03 pm 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);
    }
    }
  • Replied 12 October 2017, 8:04 pm 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.
  • Replied 12 October 2017, 8:43 pm 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.
  • Replied 23 October 2017, 5:05 am EST

    Thanks,
    Good updates.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels