DataList, repeatcolumns > 1 in flow layout

  • Thread starter Thread starter David Lozzi
  • Start date Start date
D

David Lozzi

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
 
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 <BR> tag 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'>"));
}
}
 
Back
Top