MVC Razor, displaying displaying data in certain order - html

I have an MVC View where I need to display DATA in a certain format, example below is in alphabetic with a numerical value tied to that letter. It needs to be Top Down, split into 2 different columns. As shown in the image attached it is alphabetic going down, then when half way through it needs to start on the next column, row 1.
This will be in a partial view and be used with several different result sets. Definitely cannot hard code.
I dont have any code right now as I could either use either a table or just some Spans. Open to suggestions.
I've thought of splitting the array in half, then just looping through each array item by item but wondering if there is a better way.
Thanks in advance!!

Depending on your HTML structure (difficult to tell as you haven't shown it), you could possibly use css column-count:
.yourElement
{
column-count:2;
}
Other than that, splitting the array in half is not such a bad idea, i suppose it depends on the length.

Related

SSRS Charts: solution for better assignment of colors to the legend

If you have a line chart in SSRS with many lines, it is nearly impossible to identify which line belongs to which item in the legend, as the colors are nearly the same. Is there a better solution?
bad example of line chart legend
Some suggestions that may help:
Group some of the values into an Other group. It looks like you have
some values that come and go, or don't run for the full timeframe of the
report, lumping these into an Other group will mean less legend items.
Move the legend to the bottom of the chart. This can sometimes make
the legend easier to see; this is not a good option when have a lot
more legend items than what you have now.
Use more than one chart; one chart for each line is possible. This
may be a good option for you. Use more than one chart, and only
display certain values in each. Perhaps you have some natural
grouping in the data that isn’t obvious from what you have provided
in the question. If you do, use that to separate the values into
different charts.
Use a different color theme. The theme you are using now would leave
any color-blind person wondering what was in the chart at all.
Make the chart larger. You just never know, this may work.
Use a column chart rather than a line chart. The bars are wider, and
can be easier to see. Plus, with the way your values come and go, it
may be a better way to visualize the data.
Limit the timeframe of the data being displayed. Having less data may
make this look better, but that may defeat the purpose of the report.
Still, it’s an option.
Good luck.
All good ideas by R Richards. I often end up with charts looking like yours. The first thing I do is ask. Is this of any use to the end user, if not I'll try to rationalise the chart. Some of the ideas in the earlier answer are things I try but also you can try the following without reducing the amount of data in the chart.
Simply make the lines thicker, it's much easier to identify the colours with thicker lines.
Add tooltips to the data points so that the user can hover over the
lines and get info about the line and/or point.
Use a custom pallet, the default palette does not have many colours in (7 I think), so colours are repeated. Creating a custom palette with more colours will make it easier to identify each line. It also means, if you can ensure the order of series in your data that you can you produce consistent charts were a colour always represents a specific business object.
If you have breaks in the data, change the chart to use an average
to give you a continuous line. I think your x axis has to be set as
a time type for this to work, I can't remember off the top of my
head.
Here's a before and after the first two ideas were applied to a sample chart I built.
If you think you need to reduce the data, group line with smaller values together and then add a drill down chart to show these lines.

In SSRS Matrix report I need to display one more column as last and need to display only on last page,not as a last column of every page

I have created a Matrix report. In the matrix report I have limited the report columns per page.
For example, I have limited the number of columns per page to 6. I therefore have 12 columns over 2 pages. I need to insert one more column after 12th column (13, Cost), and to only display this on the second page of the report, not as a last column of every page.
Note: I need to add the "Cost" as last column on last page for the column group.
From the image the columns 1,2,3,4 want to display on last page only.
My report design
Example:
Click here to view the report details
Can anyone please help me with this. Thanks in advance.
I don't really get what you're trying to achieve exactly because usually tables grow vertically, as in rows get added, which could cause your report to grow in pages. Making it extremely difficult to determine what is the last page of your report.
To solve your problem you could simply create a second Tablix which contains only the columns that you wish to display on the last page. And remove those columns from the first Tablix. This will also make it a lot more easier to determine when to add a page-break.
Using expressions (combined with rectangles for example) you could do a lot more grouping and manipulating of the layout. Unfortunately I don't possess enough information and details to give you more accurate advise but you're always welcome to update your question if you need any more assistance.
Update:
What you're trying to do in point [2.] of your comment is simply not possible with the reporter. There is no way to determine on which page you are leave alone the exact position on that page.
The only way I know how to calculate this accurately is by keeping track of the exact row's nummer you're at aswell as the amount of rows that fit on a page. Needless to say that this is an extremely tedious and troublesome, especially if the columns aren't fixed either.
Using the column grouping as you say in point [3.] might be possible but have to share the expressions you used for divide the table and the column grouping to be certain. And even then it'll be a complex expression to force this kind of behavior.
However, I believe you could use my first suggestion and change it slightly based on your new description. Instead of creating a new Tablix below, you could place him next to your first table. This new tablix then only needs to have 1 column, the extra column you're trying to add.
If there is enough space on the last page to place this column next to the last column group, then it will be placed exactly where you want it. This of course won't work if you don't have enough horizontal space on your page, then it'll simply get printed on an entire new page.

Adding a different image to each list item from RSS

I have a list item from RSS I used the zRSSFeed in particular. I would like to have a custom image on each of the list items. I'm presenting them in blocks or 3 in a row on normal width. Technically I guess I could target each one of them separately, I have no more than 6 of them, but I was wondering if there was a much better way to do it. It would be no problem if I could add some additional classes, but the HTML is generated by RSS.
Any ideas?

Display 3 columns of same height with variable amount of data

I'm building a page full of hyperlinks which are gotten from querying a content management system, so the number of links is variable.
The requirements need me to display all the links over 3 columns and make it look presentable.
So at the moment I've got myself a Map<Category, Hyperlink> and when I display it at the moment its in one big list on the page.
Is there some way I can dynamically get my columns to flow into each other so that each column contains a similar number of hyperlinks?
Thank you.
The easiest way I can think of to do this is to put the links in to an unordered list, then set the style for each list item so that they are 33% of the available width and displayed inline.
You might try looking at the following sites:
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5268973.html
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The second one is the best one, in my opinion. I used it before when I had the same problem. It gives all the code, really nice illustrations and you can just copy the code free of charge. I think this is exactly what you are looking for.

Design ideas for displaying large amounts of data in an html table

I have an html table that literally has like 30 columns of data, and I'm having a hard time framing it in such a way that it can be visible without massive left/right scrolling.
One thing I was wondering is if anyone has ever seen anything clever with column headers? Some of them just can't be abbreviated down enough, but the column header is something like "Interview" and the value is numeric (lots of wasted space for the header alone). Granted, I could try and name these columns like INT or whatever, but there are lots of similarly named columns that it could become confusing.
Maybe some sort of auto collapsing columns based on mouse movement? Not sure.. I just need some creative suggestions on how to display this data!
Most likely the user will have a devil of a time comprehending 30 columns of data, regardless of scrolling.
I would recommend showing the most fundamental columns (things like name, description, identifying numbers -- core stuff, hopefully there are only 10 of them or less), and then letting the user toggle on or off whatever columns they need. A bit like google squared.
Use Jquery and CSS to accomplish this in a clean fashion. There may also be Javascript UI libraries that do this for you (Jquery UI, YUI, others...)
create images for the column names and rotate the text in the image 90 degrees. you can then have a long name with equally small widths.
Josh
I agree with the answer from ferocious, toggling columns is a good idea. Also, depending on the data, I would recommend only having a few columns displayed, and when the user clicks on the row they are interested in, it moves to a new page dedicated to the data in that record. This will work for some types of data and not for others