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.