I am currently using a Hierarchical Kendo Grid. You can see some exmples from kendo what I am trying to acomplish foud at this link: http://demos.telerik.com/aspnet-mvc/grid/hierarchy .
Now I have it all working properly as I want, except for how it renders. I have over 15 columns in the child grids within each row, and when I do a horizontal scroll to view them all, the styling all falls apart on the kendo UI.
If you look closely you will see that once a scroll occurs the headers of the parent rows do not stay fixed with the data, and the child grids, the rows extend beyond the rendered view. Has anyone come across this issue, and does any one know what I can do to address this?
If the child grid columns do not fit due to their number or large widths, then enable scrolling for the detail grids.
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#width
Related
I have a grid of accordions like in the codesandbox below. The problem is when I open one of the accordions, it pushes down all the accordions in the row below, whereas the desired behaviour is to just push down the accordion right below it and the other accordions in the lower row staying in the same place. What needs to be changed in the following code to get this effect?
https://codesandbox.io/s/basicaccordion-demo-material-ui-forked-sw4juk?file=/demo.tsx
You can utilize the power of the Grid component to get your desired behavior. Nesting grids within grids is the magic sauce:
To do this with the material Grid component, the layout will need to be as such:
EXAMPLE (I forked your sandbox)
I want to make a GUI with QT Creator 4.9.1 ,my aim is to split my mainwindow into 5 areas(no multiple window), my question is how can i realize that, or better what is the best Layout solution for that?
I have allready tried to set a datagrid and add inside that grid 5 frames, the problem is that the first frame has the size of my whole datagrid and i can't resize it.
My next try was to add 5 different datagrid on my GUI but i can't set the size of the datagrid's in QT like wpf or forms.
My last try and my current solution is without any layout, i add 5 fame's inside my mainwindow but that isn't a good solution.
Inside visual studio i realize that with datagrids i create for every menu one grid and change the visibility when the user need a other (area 2).
friendly wishes sniffi
The suggestion to using dock windows may be a good one to investigate, particularly if you need to allow the user to resize or move things around. However, to get the layout you want with just layouts, the trick is to use multiple layouts.
Create a vertical layout for the left-hand side and add the four widgets to it. Create a horizontal layout and add the vertical layout in the first column and your tall, fifth widget to the second column. Apply the layout to your main windows, and that should give you roughly what you're looking for.
You'll almost certainly need to play with the row stretches on the vertical layout to get the proportions you want, and with the column stretches on the horizontal layout.
The alternate would be to create a grid layout where the widget on the right side spans four rows, but I think you'll be happier with the mix of the two layouts.
Context for this question
We have a web page that has two scrolling grids, not paginated grids. When the first grid is nearly empty, occasional users do not realize they can scroll down to see the second grid. Other layouts (tabs, etc. are not a desirable solution).
Aside. The entire page layout is due for an overhaul, but on the Development schedule it's still 2 years away. Today, we cannot remove the grids, and we cannot change the general layout of this page.
When the first grid contains very little content, it would be good to auto-shorten the first grid so that the second grid peeks up above the fold. But when the first grid has lots of content, it's better if the first grid remains at its default height, because this grid is where the main interaction takes place, and we don't want excessive scrolling.
The challenge is that, in the grids, each row varies in height to fit its content. Sometimes a row is 2 lines of text, sometimes 12 lines of text. This causes a hard-coded height based on the number or rows inappropriate.
The question
What methods are there to assess the height of the row content in the first grid so that, if the total is less than the default grid height, we can shorten the grid? Or is there another way to look at this problem?
I recently found Foundation5 has Block Grid which has rarely found use case online anywhere to demostrate the importance of using it... or is it even a great function to have? Because I am currently using Bootstrap3 and found it does not have Block Grid. So I wonder if its really a big feature one should watch out for.
Maybe some critical user case that will be so much better to use Block Grid other than Column based Grid.
Thanks!
There are several differences between the block grid and regular column grid..
The block grid is always evenly spaced and distributed
The block grid requires less markup
The block grid doesn't have inner padding
Take a look at this demo: http://codeply.com/go/XiyFxtMcXT, and you'll see the differences. Notice how the block-grid evenly wraps the items when the items exceed one row.
Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.
You could just as easily use a percentage based grid system to achieve the same result.
I think the benefit of the 'block grid' is:
Items are displayed in a 'ul' which will group them together (good, for accessibility).
It's quicker to add one style to a 'ul' that will automatically make each 'li' a 'column' than it is to add "col-x" to each 'li' manually
They've already built it so you don't need to.
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.