Display three columns per row in MVC cshtml

Question

What I have currently is the below which works fine but now it shows my records in a long list, what i want to do is show three(3) records per row. I tried putting a for loop over the tags but it doesnt work it just displays duplicate of each record three(3) time.

   @foreach (var ClientItem in Model.Clients)
                    {
                      <tr>
                        <td>
                            <div id="dataListItem" >
                                @Html.Hidden("ClientID", ClientItem.ClientID)
                                @Html.Label(ClientItem.ClientName)
                                <input type='checkbox' name="ClientItemCheckBox" id="ClientItemCheckBox" style="color: #428bca;" />
                            </div>
                        </td>
                     </tr>
                    }

please help I've ran out of ideas, I've also tried archive that was asked before

use a counter to hold the index of your clients, and after the third item you add a new row tr — Mivaweb
– Mivaweb, Commented Nov 26, 2014 at 13:23
If you are using Bootstrap 3.x (default in new MVC projects) you can simply use CSS classes to control your column output and not even bother looping through at all. Post a reply comment if you want me to expand an answer with an example. — Claies
– Claies, Commented Nov 26, 2014 at 13:40
Yes I'm using Bootstrap, please expand your answer. @AndrewCounts thank you. Unlike people who just downvote without explaining where I went wrong. — Lord-David
– Lord-David, Commented Nov 26, 2014 at 13:43

Claies · Accepted Answer · 2014-11-26 14:02:19Z

13

Using Bootstrap Responsive grids, it is not necessary to manually build a table and loop through the rows. Bootstrap will automatically wrap columns for you. Bootstrap works on a grid system using 12 columns, and if more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
    <div id="dataListItem" class="col-md-4">
        @Html.Hidden("ClientID", ClientItem.ClientID)
        @Html.Label(ClientItem.ClientName)
        <input type='checkbox' name="ClientItemCheckBox" 
                    id="ClientItemCheckBox" style="color: #428bca;" />
    </div>
</div>

here is a sample on Bootply

answered Nov 26, 2014 at 14:02

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lord-David Over a year ago

WOW this was easy and straight forward, I will be taking this route from now on thanx man. Simplest and efficient answer I've ever received here. It works by the way.

Claies Over a year ago

glad to help. there are all kinds of advanced options you have with these grids, like handling overflow on different size devices. The sample I posted using col-md-4 will display one column on small (tablet) or extra small (phone) devices. Resize your browser window to see the effect.

Lord-David Over a year ago

I will definitely look into them from now on...thanx once again.

James Culshaw Over a year ago

Surely you should try to keep to only having a maximum of 12 columns defined per row? With this approach you could have 1000s of columns defined per row.

ekad · Accepted Answer · 2014-11-26 13:38:26Z

Use for block and print <tr> or </tr> based on the value of i. If it's the first index (i equals 0) or it's the fourth, seventh, ... (3n+1)th index (i % 3 equals 0), then print <tr> before <td>. If it's the last index (i equals Model.Clients.Count - 1) or it's the third, sixth, ... (3n)th index (i % 3 equals 2), then print </tr> after </td>. The below code should give what you want.

@for (int i = 0; i < Model.Clients.Count; i++)
{
    if (i == 0 || i % 3 == 0)
    {
        <tr>
    }
    <td>
        <div id="dataListItem" >
            @Html.Hidden("ClientID", Model.Clients[i].ClientID)
            @Html.Label(Model.Clients[i].ClientName)
            <input type='checkbox' name="ClientItemCheckBox" id="ClientItemCheckBox" style="color: #428bca;" />
        </div>
    </td>
    if (i % 3 == 2 || i == Model.Clients.Count - 1)
    {
        </tr>
    }
}

Collectives™ on Stack Overflow

Display three columns per row in MVC cshtml

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related