Goal:
Vertically Scroll multiple tables (AG-Grid) with a "global" scroll-bar on the main window.
Problem:
I have 4 child elements (AG-Grid Tables) within a Window, these children can be up to 3 times the with of the main Window.
Now the children would need to be scrolled separately and a scroll bar would be displayed in the rather slim child elements.
The goal is to display a horizontal scrollbar on the main window itself (if the children need scrolling), and this main scrollbar scrolls one of the child windows (AG-Grid offers the functionality to synchronize the scrolling of one table to another).
All 4 children always have the same width as the width is determined by the columns shown within the AG-Grid tables.
The application is written in React using AG-Grid for displaying/virtualizing these tables. So if someone has a solution specific to AG-Grid this would still be helpful.
Thanks for any input!
Edit for clarity: It is already possible to scroll the grids separately / the second thing working is to give the window the full with and scroll the window itself instead of the grids (This is unfortunately not a solution as the first column of the grid should be pinned to the left side of the screen so rows can still be identified when scrolled to the right)
Edit: Screenshot for clarity
It seems you need to combine this two features column pinning and aligned grids. I don't know if they work together.
Related
I've got a component making use of react-virtualized's List for its virtualized scrolling, where each row is either a category header, or actual content belonging to that category. So something like:
Fruits
- Strawberry
- Blueberry
- Mango
- ...etc
Grains
- Oats
- Wheat
- Rice
- ...etc
(Where Fruits and Grains are category headers)
As the user scrolls, if they scroll past a category header, I want to be able to take the data from that row and render it in a "sticky" (in quotes because position: sticky isn't really a viable option yet) container, stuck to the top of the scroll container, until they scroll past the next category header, and so on. (Basically, the same way that scrolling through Artists works in the iOS Music app.)
The tricky thing is, I want this sticky header to still be inside the scroll container, rather than overlaying it or sitting above it, and it needs to fill the width of its parent container, which rules out rendering a sticky container outside of the List component and just overlaying it on top with position: absolute.
As far as I can tell, it seems like doing something like this isn't really possible with react-virtualized at the moment - since all the rows are positioned absolutely, there's no way to create a "sticky" row inside the scroll container. Absolutely positioning the sticky header would work, but only if all of the other rows were statically positioned in the normal document flow.
Is it possible to achieve something like sticky headers with react-virtualized right now? If not, what would it take to make react-virtualized support them?
Thanks!
We had similar requirements to you - we need a list that was sectioned with support for sticky headers. We could not achieve this with react-virtualized Lists/Grids, so I created https://github.com/marchaos/react-virtualized-sticky-tree which supports sticky headers.
It only renders what is required to show a visible list plus any parent nodes so that they can remain 'sticky'. Any parent that then becomes unstuck is removed from the DOM. Note that it supports nested sticky levels as well.
See example here.
(Disclaimer: I am the author)
I'm creating an application that has a layout based on the ExtJS5 Portal Demo. I need to have a panel in the Dashboard that will fit vertically, not just horizontally to fill the entire space of the column. At this time this just needs to occur for one of the panels, not all as most will have a fixed height and the user of course has the ability to resize vertically because the Dashboard panel uses anchor layout.
This panel will contain a map and I need to display as much of the map as possible. If the column contains multiple panels and the user drags one to a second column I would like for the map panel to resize and fill any empty vertical space in its column. The inverse is true, if someone drags a panel to the same column as the map panel will need to decrease but still fit to as much vertical space as possible.
I believe using a vbox layout on the panel is what I need but I've tried this on the dashboard panel with no luck. Has anyone else run into this, any suggestions? Thanks
Have a look at the align config on vbox - it might do what you want if you use one of the stretch options.
http://docs-origin.sencha.com/extjs/5.0/apidocs/#!/api/Ext.layout.container.Box-cfg-align
I am trying to build grid elements in which there are two columns and each has a couple of rows of panel elements within them. Everything looks great except for when I scroll my navbar to the point of the grid elements. The elements overlap the navbar like they are floating on top. The weird thing is no other part of the page is doing this, everything is behind the navbar when I scroll except for the grid elements.
Here is an image of the effect I'm seeing:
Anyone have any idea what is going on? I am also using headroom.js for my navbar.
EDIT: Here is the link to the live website: (link taken down after finding answer, as website still under construction)
It's an issue with the navigation's z-index. Even just giving it a value of 1 fixed the overlap for me. FYI, the higher the number the less likely it will be under another element, so you should probably make it something like fifty billion (or 999).
.headroom {
z-index: 999;
}
I am trying to style a NAV menu that is created and fed in dynamically by a SAAS CMS. I want the menu to auto resize into any given number of Columns.
For example:
If the NAV overall width is 960px. I want the menu items to resize in to say 5 equal columns.
Secondly the menu goes two children deep.
So if the top level is parant. this is seen by default on the page. When you hover the Children appear Similar to this site. http://www.laylagrayce.com/ (Ignoring the images in the menu.) I just want it to resize into equal columns.
How can I do this?
You have heard about responsive websdesign? In this case I think its the onlyest solusion.
I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.
You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.
Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();