Forums (Obsolete)

Portal Engine Questions on portal engine and web parts.

Version 7.x > Portal Engine > Web part that creates vertical columns?

View modes:

Member

Member

mvcftw-gmail - 5/13/2013 10:40:16 AM

Web part that creates vertical columns?

I'm trying to create vertical columns WITHOUT rows being equal in height.

A E
B F
C G
D H

I thought I could do this with Datalist and RepeatColumns=2 and RepeatDirection="Vertical", however, if "C" in my example is extra big and wraps, then "G" will also grow to fit the row. I tried using the "Flow" layout, but I couldn't solve the issue with CSS. It seems to have the same problem, because you have to float the span, and clear the span to start the next row which means the row will have the same height, just as the table layout.

Is there a better web part or technique I'm not aware of? If there was a control that would output ABCD as a group, then EFGH as a group there would be no problem with row height.


Kentico Legend	Brenden Kehren - 5/13/2013 11:51:49 AM RE:Web part that creates vertical columns? How are you defining how many items are in one column? Also, what was the issue with CSS with the DataList?

Member

Member

mvcftw-gmail - 5/13/2013 1:35:08 PM

RE:Web part that creates vertical columns?

They're child documents of the parent. Sometimes with folders separating them in which case a nested datalist is used. And the transformation is simply showing the ArticleName. But if it's a long one, it wraps which in a TD causes all the other TDs in a TR to expand.

There is no issue with the CSS. It works as it is intended too, which is too say, layout=flow and layout=table have the same structure in the end. Whether it's TD or SPAN, it still has the same limitations.

For example,

<span>
<span>A</span>
<span>E</span>
<br>
...
</span>

I have to float the spans, and clear both on the br. So it styles exactly the same as the table. If I don't clear on the BR, then the columns go out of order to fill the new space.

Thus I don't think the solution lies with data list. The markup needs to be output differently. With the columns separated, not the rows.

Kentico Legend

Kentico Legend

Brenden Kehren - 5/13/2013 1:52:21 PM

RE:Web part that creates vertical columns?

You might check out the Hierarchical viewer. There are some blog posts and KB articles as well that talk about how to set them up. Not sure if I'm barking up a wrong tree or not but they might get you in the right direction as they work very much like a repeater (can define your own layout) and nest as many levels as you need. Instead of using <span> try an unordered list, they are a lot easier to style in my opinion.

Member

Member

mvcftw-gmail - 5/13/2013 2:35:00 PM

RE:Web part that creates vertical columns?

I appreciate the response. I'm hoping for a definitive answer from someone who's encountered this before. I can't afford to waste any more time experimenting with different web parts, it's great experience, but I just don't have time with this project.
Rendering top to bottom in multiple columns should be a pretty standard need.
I'm hoping the answer does not lying in cloning datalist and rendering different HTML.

BTW, it was datalist that decided the markup would be nested spans and brs. My transformation is with in that.

Kentico Legend

Kentico Legend

Brenden Kehren - 5/13/2013 2:42:55 PM

RE:Web part that creates vertical columns?

Not a problem. Unfortunately the DataList and other controls have some html elements already determined so you're best bet is to use a control in which you can decide your own layout which is why I suggested the Hierarchical viewer. You can do the same thing with a repeater as well. Just style the elements as you need to. I don't believe your challenge is finding the right control, its deciding or learning how to style whatever output you have. Take a look here for some suggestions on styling your list.

Member

Member

mvcftw-gmail - 5/15/2013 10:53:32 AM

RE:Web part that creates vertical columns?

I know how to do this without Kentico, so your example is appreciated, but doesn't help me resolve this in Kentico.

In my mind, this is 100% a Kentico question to get the mark up where I need it.

I would gladly use repeater, but I don't know how to determine the data in the transformation is at the half way point and it's time to finish off that column and start a new column.

With data: one, two, three

I would need to spit out:

<div class="column">
  one
  two
</div>
<div class="column">
  three
</div>

So it comes down to knowing when the data row index has passed the half way point and outputting additional markup. If I can do that with a transformation, then that solves my problem and the web part doesn't matter.

Kentico Legend

Kentico Legend

Brenden Kehren - 5/15/2013 11:05:31 AM

RE:Web part that creates vertical columns?

mvcftw-gmail wrote:
So it comes down to knowing when the data row index has passed the half way point and outputting additional markup. If I can do that with a transformation, then that solves my problem and the web part doesn't matter.

When creating a transformation, take a look at the link in the top left of the Transformation box that says "Transformation examples". That is very helpful. In the transformation for your repeater you should be able to get the item index with

<%# DataItemIndex %>

and the item count with

<%# DataRowView.DataView.Count %>

Here is something I use for a 3-up display:

<div class="<%# ((DataItemIndex == 0) ? "first " : ((DataItemIndex + 1) % 3 == 0 ? "last " : "middle ")) %>four columns">

Or somthing to display on different rows (could be similar for your columns)

<%# ((DataItemIndex + 1) % 3 == 0 ? "</div><div class=\"row\">" : "") %>

Hope this helps.


Member	mvcftw-gmail - 5/15/2013 12:06:56 PM RE:Web part that creates vertical columns? This is fantastic, and exactly what I was hoping for. Thank You. I added the following to my ASCX transformation in case anyone finds this thread through searching. <%# ((DataItemIndex + 1) == (DataRowView.DataView.Count/2) ? "</ul>\n<ul class=\"column\">" : "") %>


Member	mvcftw-gmail - 5/13/2013 1:49:09 PM RE:Web part that creates vertical columns? Now that I can see your reply in the context of my message, by "issue with CSS", I meant my original issue of wanting vertical columns with rows that weren't equal in height. I was unable to solve that with CSS alone. To do so, I think would require different mark up.

Top