Removing both table and span tags from asp:DataList

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 setRepeaterDirection="Horizontal" but that still give me the tables.

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

Solution 1:

 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>
    <TtemTemplate>
        <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.

Solution 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.