Repeater display horizontal output

I'd like to display my repeater outlook horizontally, meaning it should loop into next column instead of 1 column output.
zachvaldezAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi Zachvaldez,

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

Regards,
Chinmay.
1
zachvaldezAuthor 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

0
Chinmay PatelChief Technical NinjaCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

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

zachvaldezAuthor 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.
0
Chinmay PatelChief Technical NinjaCommented:
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

0
zachvaldezAuthor Commented:
Datalist  is cool!
0
Chinmay PatelChief Technical NinjaCommented:
:) I am glad it worked out for your :)
0
zachvaldezAuthor Commented:
Yeah, I'll remember Datalist for sure!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.