By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,495 Members | 1,307 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,495 IT Pros & Developers. It's quick & easy.

DataList, repeatcolumns > 1 in flow layout

P: n/a
Howdy,

I have a datalist which is displaying a list of categories and their
associated sub categories in secondary datalists. Works great in a single
column. Unfortunaly when i switch it to repeatcolumn = 2 (or three or
anything over 1) , the data is displayed quite erratically, for example

category 1 category 3
sub 1 sub 1
sub 2
sub 3
category 2 category 4
sub1 sub 1
sub2 sub2
sub3
sub4

so there's a ton of space after the list items with the shorter sub
categoeis. So I swtiched it to RepeatLayout = Flow and it puts it all into
one column. How can I get this to work so it looks more like

category 1 category 3
sub 1 sub 1
sub 2 category 4
sub 3 sub 1
category 2 sub2
sub1
sub2
sub3
sub4

Thanks!!
David Lozzi
Feb 1 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
hi david,
i looked into this and if you have a Table layout, then obviously if one
cell is tall it will stretch out every other cell in the same row to be the
same height.
If you use a Flow layout, the DataList inserts a <BRtag at the end of
every row. i tried adding an empty SeparatorTemplate but it did not change
the behaviour.

essentially what you want is a set of columns, that do not have any table
rows (or else you will get the behaviour you describe). you could try using
a Repeater, although it does not support repeat columns.

i did up this simple example (aspx + code behind below) which implements
something like a repeater with repeat columns without the line breaks. it
uses floated divs, and the ItemDataBound event to start a new column when
needed. you can obviously replace the GetRandomDataSource with your own
code, but remember to set the VerticalColumnSize before you bind the grid,
as is done at the end of the GetRandomDataSource method. any q's just let
me know. in the code behind you just ste what the RepeatColumns local
variable, and the ItemDataBound will event will make sure that you end up
with this number of columns. the repeat direction has to be vertical,
otherwise you are going to have the same problem as you posted originally.

hope this helps
tim

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
div.col
{
float:left;
padding: 1em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server"
OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<div class='col'>
</HeaderTemplate>
<ItemTemplate>
<%# Container.DataItem.ToString() %><br />
</ItemTemplate>
<FooterTemplate>
</div></FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

*************
code behind:
*************
public partial class DataList : System.Web.UI.Page
{
private int VerticalColumnSize;
private int RepeatColumns = 3; // default

protected void Page_Load(object sender, EventArgs e)
{
this.Repeater1.DataSource = GetRandomDataSource();
this.Repeater1.DataBind();
}

private ArrayList GetRandomDataSource()
{
ArrayList arr = new ArrayList();
Random r = new Random();
for (int i = 0; i < 45; i++)
arr.Add(r.Next(200));

// the number of items to insert in each column is calculated by dividing
the total number of items by the RepeatColumns size
this.VerticalColumnSize = arr.Count / RepeatColumns;
return arr;
}

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs
e)
{
if(e.Item.ItemIndex 0 && e.Item.ItemIndex % VerticalColumnSize == 0)
e.Item.Controls.AddAt(0, new LiteralControl("</div><div class='col'>"));
}
}

"David Lozzi" <dl****@nospam.nospamwrote in message
news:uV**************@TK2MSFTNGP05.phx.gbl...
Howdy,

I have a datalist which is displaying a list of categories and their
associated sub categories in secondary datalists. Works great in a single
column. Unfortunaly when i switch it to repeatcolumn = 2 (or three or
anything over 1) , the data is displayed quite erratically, for example

category 1 category 3
sub 1 sub 1
sub 2
sub 3
category 2 category 4
sub1 sub 1
sub2 sub2
sub3
sub4

so there's a ton of space after the list items with the shorter sub
categoeis. So I swtiched it to RepeatLayout = Flow and it puts it all into
one column. How can I get this to work so it looks more like

category 1 category 3
sub 1 sub 1
sub 2 category 4
sub 3 sub 1
category 2 sub2
sub1
sub2
sub3
sub4

Thanks!!
David Lozzi
Feb 1 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.