Removing both table and span tags from asp:DataList

Question

A DataListis rendered with <table> or <span> tags, which I don't want.

I've set RepeatLayout="Flow" but that still gives me spans. I've set RepeaterDirection="Horizontal" but that still give me the tables.

how can i get a simple datalist without all the spans \ tables?

<asp:DataList ID="MyDataList" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
   <ItemTemplate>
     ....
   </ItemTemplate>
</asp:Datalist>

Thanks in advance!

Fronia

Answer 1

Do you need it to be a DataList control at all? You can have full control over the rendered HTML by using a Repeater or even just looping through your objects and manually rendering your output.

Pylos

well, its just parsing a query from db to a list.. i just want to control the style.. using repeater wont give me span\tables? just plain data? – Fronia

@Nat: A repeater allows you to specify whatever html you want. – Gorlicki

@Nat: Correct, a repeater shouldn't wrap your content like a datalist does. – Pylos

Answer 2

Sometimes you can't use Repeater, because DataList provides additional possibilities (like updating the database via UPDATE and DELETE commands, working directly with the asp:DataSource).

Therefore, if you still need to use DataList but want to avoid it's html, you can do a bit of jQuery on top of it as I did it.

aspx code:

<ul class="list">
    <asp:DataList ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" DataKeyField="photo_id" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <li class="item" id='<%# Eval("photo_id") %>'>
                Whatever else you need here.
            </li>
            </ItemTemplate>
        </asp:DataList>
    </ul>

This will produce HTML like this:

<span id="SomeId" style="">
   <span>
      <li class="item ui-droppable" id="31349">
        Whatever else you need here.
     </li>
   </span>
</span>

Obviously there are 2 span tags you don't need. To remove them, you can add jQuery script on the page.

<script type="text/javascript">
$(document).ready(function () {
    $('.item').unwrap(); $('.item').unwrap();
});
</script>

In my case, I wanted to produce unordered list that I control. But as obvius, you can do it any other way by changing the HTML in DataList and targeting the right item in jQuery (.item).

Hope this helps someone else that needs DataList functionality and can't do it with Repeater.

Grandmother

This is a much better solution for this tread because the OP asked about how to remove br and span using <asp:DataList />, and everyone else responds for the OP to switch over to using <asp:Repeater />. – Darwinism

Answer 3

I think you might find it easier to use a repeater which will allow you to set your own markup.

Bascially, create an asp repeater, bind your data to it in much the same way as the datalist, and build your markup in the "itemtemplate " tag. (warning this is from memory - I'm on my roving laptop, so don't have Visual Studio to check syntax.)

<asp:Repeater runat="server" id="MyRepeater">
    <HeaderTemplate><h1>My Data Title</h1></HeaderTemplate>
    <ItemTemplate>
        <p>Any Markup you want. This bit gets repeated</p>
        <%#Container.DataItem("DataKeyOrColumnName")%>
    </ItemTemplate>
    <FooterTemplate><p>The footter (and header) only appear once.</p><p>you could use them to start and end a list or table</p></FooterTemplate>
</asp:Repeater>

You will only get the markup you put in the templates, nothing else. You can skip the header and footer if you don't need them. And if you want no markup at all, just have no tags in your template, the data will come out as plain text.

Toothless

Answer 4

I was getting this error because I was using <Table> in the header and </table> in the footer templates, I remover that, and I used an entire table on each Template and it stops getting that unwanted tags.

Libradalibrarian

Answer 5

AS this is one of the top results on Google for this problem you can do the following:

If you need the Datlist Control you will need to set the property RepeatLayout="Flow"

Anwser was found here: http://forums.asp.net/t/1388759.aspx?Datalist+without+table+

Carola