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.
Related
I am using ItemTemplate ( that is ViewCell ). I got know about the Orientation article in Xamarin documentation but there is no point about handling ListView orientation.
Hope to get the answer
Screen shots
http://i.stack.imgur.com/lkMvC.png
http://i.stack.imgur.com/5PrJj.png
As you can see from your screenshots, this is not an orientation problem, your listview IS the full width in both cases, what is quite possibly wrong are your layout options.
Can you show us your item template definition?
You are using a grid inside the ViewCell?
In that case, first make sure the grid's horizontal options are set to FillAndExpand, then check the grid column size definition.
Can you also show us the grid's column size definitions?
If they all have fixed sizes assigned, then they will always be that size, no matter how much unsued space there is.
There are 2 ways to make them use more space.
If possible, you should use the "star" sizes. This is where you give your columns sizes as portions of the available space.
If you give your first column the size 1*
and the second column size 1*
they will both take exactly half of the available width.
You can use any other numbers to select portions, such as three columns with sizes 5* 3* 1*
Which would make your first column 5 times as big as the third, and the second column would be 3 times as big as the third.
Again, in total, they will take the entire available width.
The second column sizing option is to use "Auto" sized columns, which will size the columns according to the elements inside them. Whatever size the largest element inside that column (in any of the rows) takes, that is the size that column will have.
To take the whole screen width in this case, at least one of the columns content should have "AndExpand" on it's horizontal options.
This is somewhat easier as it will automatically size the columns and you just take care of populating them properly with content, but be wary as this approach is significantly slower.
Finally, if you experience performance issues, consider implementing the ViewCell with an AbsoluteLayout. It can be a bit more pain to set up, but should work faster than grid if you have a bunch of rows inside the list view and a bunch of data in each row.
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 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.
Anyone know if it possible at run-time to know how many pixels high an asp.net gridview is?
I have a gridview on the left of my page. On the right side, I populate with random images that vary in height and I would like to (as close as possible) match the total height of the gridview with the sum total heights of the pictures on the right. (The code keeps checking for pictures until it find ones with the right height).
I can approximate the height by knowing the number of rows (gridview.rows.count * an average row height), but since row heights can vary depending on if they are long lines wrapping, I'd prefer to try and get a better height estimate...
Thx!
In all likelihood you're going to need to deal with this using client side scripting. There are techniques in javascript for determining the actual height in pixels of elements on the page that you could use.
The downside here is that you wouldn't have access to this info while the page is loading on the server side.
As an alternative, you could apply some styling to the grid to better control how high each row would be, and then implement paging so you can always know about how high the grid is.
In the past I've impelemented a fixed height gridview with a "frozen" header and a scrollable div wrapped around it, so I always at least knew the max height of the grid (obviously if you don't hit that max then the height is still variable).
There's a bunch of resources out there on how to do this, this article looks pretty good:
GridView with frozen header
well Height is a property, so I'm guessing:
int heightGV = GridView1.Height;
I could very well be wrong though, because I've never done it. Try it and let us know.
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.