DataList column allocation

Question

I am programming using .NET aspx. In the asp: DataList component, I want to distribute the columns evenly, even if not all columns are assigned an ItemTemplate.

eg.

<asp:DataList id="test" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate> ... </ItemTemplate>
</asp:DataList>

At run time, an array bound to a data directory contains only two elements. I still want the columns to be distributed evenly across four spaces.

Answer 1

If you are committed to using a DataList, there are two reasonable methods to achieve this.

First, you can wrap ItemTemplatein divwith a fixed width.

<ItemTemplate>
  <div style="width: 250px;">
  ...
  </div>
</ItemTemplate>

-, DataList , , jquery.

datalist , .

<asp:DataList id="MyDataList" ClientIDMode="Static" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
  <ItemTemplate>  
    <div class="DataListItem">
    ....
    </div>
  </ItemTemplate>
</asp:DataList>

, jquery

• ClientIDMode = "" datalist
• datalist div "DataListColumn"

jquery, ,

$(document).ready(function () {   
    $(".DataListItem").width($("#MyDataList").width() / 4); // Set the column width    
});

, .