How to Use/ Display a Asp.net DataList in MVC Razor View

Question

I have this list below, which I am generating on the fly using Razor view:

<table id="contractCoverablesGrid">
    <tbody>
        @foreach (var coverableItem in Model.ContractCoverablesList)
        {
            <tr>
                <td>
                    @Html.Hidden("coverID",coverableItem.CoverID)
                </td>
                <td>
                    @Html.Label(coverableItem.Name)
                </td>
                <td>
                    <input type='checkbox' class='chkboxActive' checked='checked' />
                </td>
            </tr>
        }
    </tbody>
</table>

As you can imagine the outcome of this is a vertical list, which keeps extending downwards.

I would like to have this list 'wrapped' into three adjacent columns instead of one single long column; just as you would do this in ASP.net Datalist server control (in Webforms).

My initial thoughts were to limit the width & height of the table to set values and then keep floating the td(s) left. But how do I float a td. I cannot turn this into div.

Any thoughts?

Please let me know.

Ethan Pelton · Accepted Answer · 2014-03-26 15:21:15Z

1

You might try a for instead of foreach. You would loop through the list divided by 3 and start a new td each time.

answered Mar 26, 2014 at 15:21

Ethan Pelton

1,7963 gold badges24 silver badges51 bronze badges

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

1 Comment

t_plusplus Over a year ago

thanks, I have solved it little differently as you can see above.

t_plusplus · Accepted Answer · 2014-03-26 16:16:02Z

1

This is how I resolved it:

<table id="contractCoverablesGrid" width="600" align="center">
    <tbody>
        <tr>
            @foreach (var coverableItem in Model.ContractCoverablesList)
            {
                <td>
                    <div id="dataListItem">
                        @Html.Hidden("coverableID", coverableItem.CoverID)
                        @Html.Label(coverableItem.Name)
                        <input type='checkbox' name="coverableItemCheckBox" id="coverableItemCheckBox" />
                    </div>
                </td>
            }
        </tr>
    </tbody>
</table>

<style>
    #dataListItem {
        float: left;
        font-weight: normal;
    }
</style>

answered Mar 26, 2014 at 16:16

t_plusplus

4,2295 gold badges48 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to Use/ Display a Asp.net DataList in MVC Razor View

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related