Repeater display horizontal output

zachvaldez
zachvaldez used Ask the Experts™
on
I'd like to display my repeater outlook horizontally, meaning it should loop into next column instead of 1 column output.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Zachvaldez,

Please post the code you have written so far. It is difficult to assume without looking at the code.

Regards,
Chinmay.

Author

Commented:
Here's my repeater code. It only list one column vertically. To minimize space, I want to  loop to the next column so that 20 items can be evenly distributed horizontally.

    <div class="container">
        
        <div class="row">
            
            <div class="col-md-10">
                <asp:Repeater ID="rptApplicationList" runat="server" >
                    
                    <HeaderTemplate>
                        <table class="responsive">

                            <thead>
                                <tr>
                                   
                                    <th><h3><u>List of Applications</u>&nbsp<i class="fa fa-folder-open"></i></h3>
                                        
                                    </th>
                                </tr>
                            </thead>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tbody>

                            <tr>

                                <td class="col-md-7">
                                    <div>
                                        <b>
                                    <asp:LinkButton ID="lnkApplication" runat="server" Text='<%#CvtWebLink(DataBinder.Eval(Container.DataItem,"ID"), DataBinder.Eval(Container.DataItem, "APPLICATION"))%>'></asp:LinkButton>
                                        </b>
                                    </div>
                                </td>

                            </tr>
                        </tbody>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
                <asp:Label ID="lblError" runat="server" Text=""></asp:Label>

            </div>

        </div>

    </div

Open in new window

Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi zachvaldez,

If you don't mind use DataList, this particular requirement can be easily met. I tried using your template with DataList

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.datalist?view=netframework-4.7.2

And tweaked it a bit to meet my DataSource model but you can see how similar both are.

<div class="container">
            <div class="row">
                <div class="col-md-10">
                    <asp:DataList ID="rptApplicationList" runat="server" RepeatDirection="Horizontal" RepeatColumns="3" RepeatLayout="Table">

                        <HeaderTemplate>
                            List of Applications</u>&nbsp<i class="fa fa-folder-open"></i>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <div>
                                <b>
                                    <asp:LinkButton ID="lnkApplication" runat="server" Text="TEST"></asp:LinkButton>
                                </b>
                            </div>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:DataList>
                    <asp:Label ID="lblError" runat="server" Text=""></asp:Label>

                </div>
            </div>
        </div>

Open in new window


Please adjust RepeatColumns as per your requirements.

Regards,
Chinmay.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
This works! However, the spacing between items are too close making it unreadable as longer texts over reach the other item horizontally.
Need to space in between.
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
You have to adjust the spacing on your own. Please note I have removed the styling you put in. If you put the margin or padding around your item template you are good to go. You can easily do that using bootstrap or simple style for example
                            <div style="padding:10px;">
                                <b>
                                    <asp:LinkButton ID="lnkApplication" runat="server" Text="TEST"></asp:LinkButton>
                                </b>
                            </div>

Open in new window

Author

Commented:
Datalist  is cool!
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
:) I am glad it worked out for your :)

Author

Commented:
Yeah, I'll remember Datalist for sure!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial