This question has been asked before over the years, but the solution proposed to just flip the dataset does not address the issue with the column headers not being fixed. Consequently, when scrolling, the headers disappear to the left. The real solution should be implemented in the control itself. So either I find a control that offers that or I will have to code the whole control myself. I'm wondering if that control already exist. Side note : I need this control to work smoothly with many records.
I decided to create a brand new control that implement the grid from scratch, using gdi+ to draw the cells. Much more flexible and also waaaay faster rendering. Implementation is still on the way.
Related
I am using a com.vaadin.flow.component.grid.Grid in my Vaadin 14 sample app. I have added an extra header row and introduced a toggle button for changing its visibility.
Unfortunately, this led me deep down to com.vaadin.flow.component.grid.ColumnLayer, which is not visible.
I have also considered dropping the header cell contents and re-adding them. However, this just leaves a full-height row behind. I have also thought about applying some CSS, but could not find a way to, without altering the official source code.
Can anyone help with a more appropriate solution than building my own Grid version (by forking the official implementation)? This feels like pretty common grid functionality to me...
To whom might be interested about this...
I have used the dirty workaround mentioned the link shared by Tatu Lund.
However, that only works for GridSingleSelectionModel.
For GridMultiSelectionModel, the underlying implementation is rather strange.
For example, I complemented the GridSingleSelectionModel workaround with setting visibility to false on the Un/Select All checkbox the GridMultiSelectionModel generates. This seems to have a listener on it and automatically hides the checkboxes generated by the GridMultiSelectionModel on each row. Which is similar to GridNoneSelectionModel, so unusable if you need to be able to select items.
Unfortunately, I have trusted that Vaadin 14 should be pretty mature by now, but as I explore it I find myself in the position to rather choose version 8, for instance.
It's not the first issue of this kind and, that being said, I am not sure I understand why is Vaadin releasing new major versions every so often, while they don't seem to be able to deliver a comprehensive, stable and reliable option to their adopters. Vaadin 8 is almost 5 years old, and it looks like no later version is even close to it.
I'm in need of some pointing in the right direction here...
I have a site with a couple of different content types. I want to display this content in a book-like layout. The book should be of a fixed width and height and the pages should be populated with as many nodes as can fit. It should be in two columns, with the left column being filled before the right one.
How should i approach this?
I have been thinking about a few solutions, don't know which are possible and which one is best or which i can combine.
I could just create a view that selects more nodes than is need. Then check how long the nodes is in the theming layer and throw away the nodes that aren't needed. Pagers need to be fixed too.
Use panels in combination with views to display one view in two columns, if this is possible. Need a way to determine the amount of nodes that is displayed on each page, based on content length.
Write a plugin/handler for views so that i can select an amount of nodes that has an maximum, predetermined, max content length.
Write a new display-style for views that shows content in two columns with fixed heights.
Write a custom module, leave views and panels out of it and do everything myself with db_queries.
Would appreciate and guidance a lot. Not looking for a finished solution, i'm not afraid to code and i will contribute back if i create something that someone else can use (like a views plugin). Just need someone to guide me in the right direction :)
The hardest thing will be to figure out how much content you need to fill out the space. There's not really a good way to do that either since, it will depend on both the markup and the styles.
The best solution I can think of is loading the nodes with javascript, or maybe just have them available as javascript variables. That way you could insert the nodes to your page one by one. You could then in the JS see the heights of all the nodes in total, and once that height is bigger than x, you only need to remove the last inserted node.
It's not a perfect solution, but I think you should look at doing this with JavaScript. The only problem is, that it wont degrade gracefully very well.
Drupal help you build fast, and it looks like promising but fails to fullfil the needs of client, designer also programmer. You need to write one module page, and some functions.
5th solution you gave has little trouble than others. Write a function that to have "teaser like" behavior, I will return formatted node according to its type. Don't lay on drupal's teaser system. If teasers will have different heights, add height to teaser function.
I don't have a direct answer, but have a few things for you to think about.
It sounds to me like what you are looking for is a combination of a CSS3 Multicolumn Layout (see http://www.quirksmode.org/css/multicolumn.html for example) and limiting the displayed content to a fixed height.
My first thought would be to create a single view that gets more than you need, display it using CSS3 columns, and set overflow: hidden; for the container, so that the extra text is just hidden.
If you need to get more particular, you may need to dig in to the views rendering system to limit the total number of nodes based on how many characters have been rendered.
But since your desired constraint is more visual than data-oriented, I think that the most practical approach will be to use javascript to detect the text height and state of overflow.
There are some things that are unclear about your requirements. What is the purpose of the 2 content types? Does one display on the left and the other on the right? Or are these just 2 different content types that should behave the same way, but we're only seeing one content type at a time on a given page? What should happen with the overflowed content? Should it appear dynamically on page 2, then 3, then 4, and so on?
One parting thought: Maybe load ALL the content that you want to page through, directly to the browser. Maybe have it start off hidden. Then use javascript to display it, formatted into columns, and use javascript to handle the paging as well.
I'm trying to figure out why I would use a grid system. I have read some but I just don't get it. I'm used to just putting stuff in html on a page and beind done with it but I have a new project and would like to use a grid because apparently it is a best practice.
I read in one article referenced in another SO question and it said that grid design was in all sorts of development, even application form design. That made me think of things like snap to grid, etc. and I didn't know if the grid in the web design sphere was the same. I was hoping someone could give me a brief but not overly complicated view and not a link to Google which I have used already.
Thank you for any help.
EDIT: I found this website the easiest: http://www.zurb.com/playground/css-grid-builder but again, what do I do with 12 columns? Is everything in a column "smashed" to fit in a column? that doesn't make sense to me.
EDIT: I read the grid 960 tutorial below and was feeling better but at the end it says:
You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!
I'm not trying to take this out of context but if I don't use it in production, what's the point? I understand the need for prototyping but if I like the prototype why not use the 960 grid? I may not understand the comment. Thanks.
EDIT:
Is the 960 system for production?
I think you're too focused on thinking about grids as applied to web and applications, and need to do a little research about the underlying reasons why grids can be useful for any form of graphic and information design, whether pixels on a screen or hand-drawn ink on paper.
I would recommend you take a step back from the computer, forget about 960, divs, snap-to-grid, and HTML entirely for a bit, and if possible flick through a few graphic design books and magazines and do a bit of doodling. Or even just pick up a newspaper and have a think about what underlying grids they use (how many columns are there, are they the same width, do grids differ across pages or sections, which elements stick to the grid, which diverge from it?).
The Grid System has a good list of resources.
Then you should be in a better position to think about how grids in general might be useful for your projects, and whether a particular model such as the 960 grid might be useful.
When i design any user interface/web design i don't pay attention to a grid layout until i start to have my main elements constructed. once that is done i implement a grid to flow nicely with those main elements for easy visual scanning
I'm currently building an application that is presenting tabular (fetched from a webservice) data and have squirted it into a datagrid - seemed the most obvious way to present it on screen.
I've now come across a few limitations in the datagrid and wonder how I might move forward. As a relative newcomer to flex development I'm a little lost.
A few things I am wanting to do.
The data is logically split into groups and I would like to be able to have subheadings in the grid whenever I move to a new group.
I would like to be able to highligh individual cells based on their content relative to other values in the row - ie highlight the cell with the highest value in the row.
Is this possible with the standard datagrid?
I'm actually using the try-before-you-buy version of flex builder at the moment but I have ordered Flex Builder 3 Pro - which is on its way to me. I understand there is an 'advanced datagrid' control in this version - perhaps that will support some of what I wish to do?
Alternatively - is there another way of building custom tabular data?
stay the hell away from Adobe's AdvancedDataGrid. You will learn quickly it has many shortcomings, you will think you are better than it and override a few things here, tweak a few things there, but in the end the ADG will absolutely destroy you. Heed my call and avoid this at all costs. The ADG was outsourced by Adobe to their failed Indian team that has sense been disbanded, it alone counts for over %30 of the entire flex framework, and their are horrible deeply rooted issues that are better off starting over at this point. STAY AWAY FROM THE ADVANCDEDDATAGRID AT ALL COSTS!!!!!
The DataGrid is the best bet for that, but also check out the AdvancedDataGrid (here are some AdvancedDataGrid Demos with Source from FarataSystems).
(source: flexicious.com)
Both the DataGrid and AdvancedDataGrid are notoriously hard to customize, and everything you'd like to do is pretty advanced, so it will take a while to get going, but you can do it eventually.
There's no other way to build tabular data unless you start doing some advanced things with some of the data visualization libraries out there.
Good luck,
Lance
I'm building a Flex app that includes an area chart, and when users hover over an AreaSeries, I'd like them to see the DataTip for the nearest data point in the series. The problem is that as far as I can tell (and I should admit at this point to being fairly new to Flex), mouseSensitivity is the only way to control when data tips appear.
If I set that to, say, 1000 pixels and tell Flex to only show a single data tip, that sometimes works, but frequently, the nearest data point is not one in the series on which the user is hovering (and in any case, it starts acting odd with such a high mouseSensitivity).
So my question, in short, is how to exert fairly direct control over which data tip is being shown at any given time. Thank you in advance.
Unfortunately i don't think there would be a straight forward method of achieving this just using a charts default members. I would expect you'd need to extend the chart component you were using and tie in with the internal workings of the chart. This isn't such an easy thing to do and the inner workings of the chart components are pretty complex. Something that isn't helped by a fairly messy implementation inside some of the classes.
There are obviously several directions you could take in solving this particular problem some that are more elegant than others.
It's defiantly possible but it's probably not a job for someone that is relatively new to flex. If i were you i would probably try to find a compromise to your requirements until you feel more comfortable delving into the chart components code.
IF you do decide to give it a go then you should come back with specific problems as myself and others are probably reluctant to solve such a big problem.
Keep the hitTest() method in mind: this is often the mouse-related unity of last resort.
Cheers