One data source, multiple flexgrids, customize and synchronize scrolling

Posted by: joe on 16 July 2019, 11:16 am EST

    • Post Options:
    • Link

    Posted 16 July 2019, 11:16 am EST

    My scenario:

    I’m using FlexGrid to display monthly sales totals for a list of points of sale. In addition to having a column for each month represented in a date range, each row will also have a Grand Total for the time period covered in the data.

    What I want:



    I want the user to see a single grid. The overall width of the grid will remain constant even though the number of columns will vary because the number of months displayed in the grid will vary based on user input. Regardless of the number of columns, I want the grid width to be constant. Also regardless of grid width, I want the first and last columns to remain visible. This means that, with the exception of the first and last columns, the rest of the columns in the grid will scroll horizontally.

    My approach:



    What the user sees as a single grid will actually be made from 3 different grids arranged side-by-side so they appear to be a single grid.

    I have one data set that I’d like to render elements of across 3 different flexgrids and I’d like to 1) suppress all scrolling in grid A. 2) suppress vertical scrolling in grid B and enable horizontal scrolling, 3) suppress horizontal scrolling but enable vertical scrolling in grid C and 4) synchronize vertical scrolling across all 3 grids with the vertical scrolling being controlled by grid C. All 3 grids will share a data source but will display only a portion of it.

    The idea behind this is the following: Grid A (left-most grid) will display a Name. Grid C (right-most grid) will display numeric totals for each row. Grid B will vary in the number of columns it will have because it will display monthly totals. The number of months will be determined by the date range specified by the user. So, the number of columns displayed in Grid B can vary from 3 to 12. The width of the display area for the data is fixed and about half the width of the browser page which means that Grid B will need to scroll horizontally when the total reaches about 6 columns. My desire is to have ONLY GRID B scroll horizontally so that the Name and Totals grids (A & C) are always visible and do not scroll horizontally. Additionally, when vertical scrolling is necessary, a vertical scroll bar will appear only on the right side of Grid C and will control vertical scrolling on all 3 grids.

    Another consideration is that I have an aggregate footer on Grids B and C that I would also like to keep visible during scrolling.

    Asking too much? :slight_smile:

    Thanks in advance!

    Joe

  • Posted 17 July 2019, 8:13 am EST

    Hey Joe,

    Please refer to the sample attached. In the sample, we have used 2 grids instead of 3 because we can use the frozenColumns property of FlexGrid to freeze the first column. But to freeze the last column, we need another grid.

    Please let us know if this fulfills your requirement.

    FlexGrid.zip

  • Posted 17 July 2019, 10:43 am EST

    Fantastic!

    It took a few minor tweaks to get it to behave the way I want it to but I couldn’t have gotten there without you!

    Many, many thanks!

    Joe

  • Posted 17 July 2019, 11:32 pm EST

    Hi Joe,

    I am glad that I was able to help you. Please let us know if you face any further issues.

    Regards,

    Ashwin

Need extra support?

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

Learn More

Forum Channels