CODEWITHSUNDEEP
c#asp.net
Mhmd
Mhmd

Reputation: 5177

How To Override Datalist To Be Rendered Into Divs Instead Of Table?

I want to render datalist to divs instead of table and the repeat columns will fixed by float style on div.

So any one knows an override render method to do that.

Thanks.

Upvotes: 3

Views: 12152

Answers (3)

Mhmd
Mhmd

Reputation: 5177

I found this solution but I posted it to help others;

Some users suggest to use repeater and that is right, but for that case to replace div instead of table in datalist

RepeatLayout=RepeatLayout.Flow

This will make it span with br. But using Horizontal for RepeatDirection wil remove br but still items rendered with span.

RepeatDirection=RepeatDirection.Horizontal

This statement will remove br but still items rendered with span.

So override RenderContents to create your own divs outside span and remove br if you do not want to use Horizontal RepeatDirection, as follow:

protected override void RenderContents(HtmlTextWriter w)
{
    writer.WriteBeginTag("div");
    writer.WriteAttribute("id", this.ClientID);
    writer.WriteAttribute("class", cssClass);
    writer.Write(HtmlTextWriter.TagRightChar);
    foreach (DataListItem li in this.Items)
    {
        writer.WriteBeginTag("div");
        writer.WriteAttribute("id", li.ClientID);
        writer.WriteAttribute("class", li.CssClass);
        writer.Write(HtmlTextWriter.TagRightChar);
        li.CssClass = null; // clear css not to added in span
        li.RenderControl(w);
        writer.WriteEndTag("div");
    }
    writer.WriteEndTag("div");

}

My Regards

Upvotes: 10

FirstDivision
FirstDivision

Reputation: 1430

I always set the DataList to Flow layout like:

RepeatLayout="Flow" CssClass="my_repeater_cssclass"

The problem here is that as mentioned above .NET still gives you a br tag to play with.

My solution is just set the br tag that the DataList generates to display:none through a CSS class applied to the DataList itself.

.my_repeater_cssclass br
{
    display : none;   
}

Then, if, for some reason you have br tags you do want to show, just give your br tag a css class and make it do what you want...like for my actual example I ended up using it to clear a float after every row:

.my_repeater_cssclass br.clear
{
    display : block;
    clear : both;
}

If you have a lot of br tags to deal with then this may not be your solution. But I find it a nice simple fix.

Upvotes: 1

Tim B James
Tim B James

Reputation: 20374

Use the <asp:Repeater> control instead of the <asp:DataList> control. Within the <ItemTemplate> of the <asp:Repeater> you can use the <div> tags to control the layout, as the repeater does not render any html of its own apart from what you give it.

Upvotes: 2

Related Questions