Kendo Angular 2 Grid Data Formatting - kendo-ui-angular2

Ok... hopefully I'll figure this out soon but thought I'd ask the community. :)
I have my angular 2 grid basically running well now, but I can't figure out how to prevent column data from wrapping and extending the row height. I know there were various tricks to use CSS and "elipsis" properties in previous iterations of the grid, but I havn't had any luck so far with the angular 2 kendo implementation.
Any ideas? I have 3 or 4 columns that I need to keep to a maximum width. I don't want the rows to grow larger than one line of text.
Thanks!

In case anyone else finds my thread... I solved this by changing the CSS for the TD elements in the kendo grid. (It took me a while to track this down as it was not apparent which style was not wrapping).
Anyway, here is the style that makes the cells use ellipsis truncation:
// Make sure table cells do NOT wrap (will use ellipsis by default)
.k-grid td {
white-space: nowrap;
}

Related

Can't get flexbox container to expand horizontally to match content

The flex layout below is working except the content container (blue) is sized by the columnar items before they wrap.
I want the blue container to expand to the right to fit the content (ie the horizontal measure after the items wrap)
Any hints would be appreciated.
Some more research shows that this is a well-known, long standing, bug, but only for the column orientation, not for the row orientation.
So the solution is to switch to "upside down" day. Turn the column into a row with the css writing-mode:'vertical-lr', then specify flex-direction:'row to match, and it works!
... but all direct children need to have their writing mode reset: writing-mode:horizontal-tb

React-Virtualized using cellmeasurer with a maximum width?

Is there any way to use react-virtualized's CellMeasurer with a maximum column width which then made the height expand?
For example, I may have an id field in column one of the grid. This would never grow too large, but I want to size it based on the largest value. Then in column two I have a text field that I am not too sure how large it will be. If it turns out that all of my current data set has a small value in column two, I'd like to size based on the largest value. If it happens to have some larger text (over a certain width) I'd like to use that maximum width, and then expand the row's height to accommodate the lines text.
From what I can see in the docs and code, this type of feature isn't supported. If this is the case, I think my best method would be implementing my own CellMeasurer with a slightly more complex _measure function. Does this sound like the proper course of action?
You should be able to do this by adding a style constraint to your rendered cell. CellMeasurer just measures what the browser reports- and CSS controls the browser's max width.
React might freeze the style object too so use spread rather than directly modifying:
style={{
...style,
maxWidth: 300
}}

Hidden column after export to excel when table has less than 4 columns (SSRS)

I faced following problem with exporting ssrs report to excel.
When I create a table having 4 columns and then exporting it to excel I get the proper layout:
But when I remove at least one of the column in ssrs designer (when table consists of less than 4 columns), after exporting it to excel, one column is being hidden:
When I manually changed the width (by typing width in properties window) to at least 3 cm, after exporting it to excel the additional column disapeared (even if the table has less than 4 columns).
Does anyone know why this happens?
Any help will be appreciated.
Easy solution: Work in POINTS, not Inches or Centimeters.
Excel renders in points, so this prevents all roundoff in positioning. It is that easy.
It's an issue with the header.
To avoid this all together insert a row in your tablix (above everything else) and set the "RepeatOnNewPage" tablix property to 'True' (Advanced Mode >> select the static row groups you need to repeat >> RepeatOnNewPage).
This approach does the same thing as a header and you won't have to deal with those pesky extra columns any longer!
Try rectangle in to rectangle.
If this do not work - insert a list and insert your object in to list.
This should help - don't know why is that - but sometimes it take a lot of attempts and scenarios to work this out for one report... just keep trying with rectangles and lists - this is what I always do.
This is common problem in SSRS - the way how I removing this problem is to use rectangle's .
Insert rectangle then CUT your table/matrix PASTE inside rectangle - make sure there is not empty spaces.
If you using more than one table/matrix , then insert rectangle inside rectangle etc. ( my record is 14-th depth ) - this is VERY annoying but I know only this way.
- ALSO - fit everything to left side corner
It works fine for me ... what ver of excel do you use ?
Can you post here rdl file or code from file ?
Are you using report builder or Visual Studio ?
- Do you have any more objects on the report or just that table ?
D.
I find that if you have headings in your reports above the actual tablix, you will have to extend the width of the heading to match the width of the tablix (you should see the blue lines showing the alignments) and ensure that the headings also align with where the tablix begins. Basically, just make sure that everything is aligned. Hope this helps.
After struggling with this for a few days this blog post helped me out:
How to eliminate merged and hidden Cells issue from Excel Export of SSRS report - MSDN
The problem seems to be that pixels and centimetres (or inches) don't line up nicely. When you drag the columns around they get non-exact approximations of the value. When you put a nice round number (even like 3.25cm) they seem to play nicer. You'd probably want to use pixels or points (what Excel uses to store cell size) to prevent the last column compressing.
I hope this helped a bit...
Late to the game, as usual. But I played around with this for a while, and it looks to me like it's just going to end up being fairly random. Sometimes I can get them to go away, sometimes I can't. I don't always have the ability to change things to nice round numbers that represent an even number of points. And even when I do, it still doesn't always work. But I did notice this. If you zoom in closely, you can see that the lines are just slightly misaligned. Believe me when I tell you that mathematically that shouldn't be happening. But I wondered if that might help explain the problem.

How do I layout photos like on Pinterest

I created a website where users can upload photos, and users can comment on the photos. The photos are shown about 12 or so on the main page of my site ordered by desc date.
However I've tried every type of display style option to get it so that if lets say the first image on the page is very tall, that the 2nd row of images aren't all pushed down. I understand the first image of the 2nd row would obviously have to appear below the tall first image of the 1st row, but the others shouldn't also have to be pushed down. Even if the image isn't tall, if there are comments on the first image of the first row, then the entire 2nd row will start under the 1st photo of the 1st row.
When I look at the website Pinterest, it appears they have this figured out and there is no unnecessary wasted space from one photo result being too tall. The others in other rows seem to use all space which is what I would like to achieve.
Currently I am using display:inner-table but it doesn't really achieve what I want although it works slightly better than some other options which sometimes produce blank skipped spaces in the results. Is the only way to achieve this through using a table with 4 columns and pre-populating those columns before printing to the page?
Pardon my stupidity. Thanks for any assistance!
Mkae your life easier with the use of jQuery for your issue.
Check out this jQuery plugins:
Masonry
Isotope
read about the difference between them here: Differences between Isotope and Masonry jQuery plugins

force breaking a string in a fixed width Gridview cell

I have a Gridview control on an ASP.Net page with fixed width cells. The data coming from the database occasionally comes over as a contiguous string of characters. When there are dashes in the string, it will break so as not to upset the width of the layout. If there are no dashes (specifically, I'm dealing with underscores), the string will not break and forces the cell to widen out, thus upsetting the layout of the page. Is there a way to tell the cell to keep its width and break the string? As it stands, I don't have access to the field's data directly, as the GridView bind its datasource to a dataset object coming from the database. Thanks for any feedback.
If you handle the RowDataBound event you'll be able to break the string "manually". Otherwise it'll only break based on "HTML rules".
First thing to note is that this doesn't have a lot to do with ASP.NET but is rather a pure HTML (and CSS) problem.
A possible solution is to use the css attribute table-layout: fixed and set some fixed width values to all columns. The disadvantage of this approach is that the total table width is fixed so it doesn't scale with the window size.
Another possible approach is to display in columns shorter strings using a utility function that cuts the long strings to a maximum length.

Resources