Marius Vasile

Marius Vasile

  • 602
  • 1.7k
  • 125.8k

Display data from Datalist in three columns instead of one

Oct 22 2023 6:58 AM

I display data from table with:

<asp:DataList ID="DataList5" runat="server" Style="width: 100%" OnItemCommand="DataList5_ItemCommand" DataKeyField="AEID">
    <HeaderTemplate>
        <div class="row no-gutters ml-1 mr-1">
            <div class="col-sm-3">
                <asp:Label class="form-control form-control-sm text-center"
                    Style="font-weight: 700; background-color: #1E90FF; color: #f4f1eb;"
                    Text="Echipament"
                    runat="server" />
            </div>
        </div>
    </HeaderTemplate>
    <ItemTemplate>
        <div class="row no-gutters ml-1 mr-1">
            <div class="col-sm-3">
                <asp:TextBox ID="txtAEID" class="hidden" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"AEID")%>' />
                <asp:TextBox ID="txtActivitateEchipament" class="form-control form-control-sm bg-white" ReadOnly="true" runat="server" Text='<%#Eval("Echipament")%>' />
            </div>
            <div class="col-sm-1 pl-1">
                <asp:LinkButton ID="btnDelete" class="pl-2" Text="ADD" CommandName="Delete" UseSubmitBehavior="false" runat="server" ToolTip="Delete">
                    <i class="bi bi-trash" style="font-size:20px; color:red"></i>
                </asp:LinkButton>
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>

but it will look like:

and for 20 items it will look not that good. I would like to group them like:

How can I do that?


Answers (1)