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.
Related
I'm just getting started using the Zurb Foundation 6.4.3 XY Grid. I'm having some trouble conceptualizing how I would do the following:
On large screens, my site should look like this:
On small screens I'd like Panel B to come first, and have a fixed height of 300px:
I have a Codepen of all this here: https://codepen.io/rbrtmrtn/pen/vWYKQP
Right now there are two issues with how this appears on small screens:
I'm not sure how to make Panel B appear above Panel A when that grid-x gets collapsed.
Panel B is a web map which requires a fixed height or some kind of autosizing (like Flexbox grow) in order to work. When I resize the site and collapse the grid-x the map disappears, probably because Foundation is trying to fit the cell to its content and there is none (the map behaves more like a floated element).
Would appreciate any help sorting this out.
A coworker steered me in the right direction -- the answer was to use source ordering, which allows you to specify the order in which elements appear on different screen sizes.
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
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've got a page of products, and some of them might have extra rows. Regardless of that, my goal is to have every product display across the page, left to right, top to bottom.
See this example: http://jsbin.com/lijisa
If you modify the JSON data so that each product has two numbers in the variations array, everything lines up perfectly.
How can I get all the columns to be a standard height, without actually setting a hard height value?
What you are looking for is known as a "masonry layout" there are a few libraries that will allow you to do such a thing
Salvattore
http://salvattore.com/
Masonry
http://masonry.desandro.com/
I also found this achieving the same effect using column-width
http://www.bootply.com/118335
Use the hidden/visible helper classes combined with clearfix, to reset your rows only on appropriate devices, like so:
Example: http://www.bootply.com/YpH56xyzDB
The hidden/visible aspect lets you clearfix between specific columns only when on the right device.
I wanted to ask what is the best practice to manage width of the radGrid.
For my application most users are running 1280 x 1024 so I would be happy to set my overall grid width to 1100. However, depending on the form in use, I sometimes have horizantal scroll bars. To solve this, I have been playing with the width of the grid, and also I have played with setting the itemstyle-width for one or two columns. Sometimes I accidentally get it right, and sometimes it is not quite right.
What is the best way to manage this?
Do I set the grid, and then all columns, or just the grid, or just the columns? I guess there is a best practice, so just wondering how you handle it,
thanks
PS. I have posted this on the Telerik forums, I know, of course, that it it not considered acceptable to paste the internet with the same post, but I do want to use stackoverflow, and hope that I am playing by the rules if I post directly on Telerik also.
Mark Breen
Mark Breen
Ireland
BMW R80GS 1987
I set the width on the RadGrid to 99% in the definition, and then if I need to constrain the width, I set the Width explicitly on the RadGrid, or a parent HTML element. You may want to set a percentage instead of an explicit with as another option too. Do you need to adjust the size dependent on the resolution?
Setting the columns helps if you want a specific column of a specific width; as you probably know, table columns can change widths as determined by the browser, and setting the explicit width helps avoiding crunching data that you want to be of a specific width.
HTH.
I also set the width of the RadGrid to 99%, but the width of the MasterTableView to 100%.
Then I explicitly set the width of each column, so the same type of data is consistently shown on all my grids. (i.e.: All phone number columns are same width. All Date columns are same width, etc.)
Most of my grids show a lot of data, so I always use the horizontal scroll.