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!

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.

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.

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.

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.

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+