更改webgrid asp Net的方向

时间:2015-03-25 14:31:16

标签: asp.net-mvc asp.net-mvc-4 webgrid

我在asp mvc页面上有一个WebGrid,它水平显示其标题列,但是我希望它们垂直显示。有谁知道我怎么能做到这一点?

这是我试图从中实现的目标;

enter image description here

到此;

enter image description here

提前感谢您的帮助。

代码:

 @grid.GetHtml(

        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,

        columns:
            grid.Columns(
                        grid.Column("Jour", format: @<text>
                                               <span class="display-mode">@item.Date </span> 
                                               <label id="Day" class="edit-mode">@item.Date</label> 
                                           </text>, style: "col1Width" ),
                        grid.Column("Matin", "Matin", format: @<text>
                                               <span class="display-mode">
                                                   <label id="lblmorning">@item.MorningUnit.SymbolToString</label> 
                                               </span>
                                               <input type="text" id="morningUnit" value="@item.MorningUnit.SymbolToString" class="edit-mode" />
                                           </text>, style: "col2Width"),
                        grid.Column("Après-Midi", "Après-Midi", format: @<text>
                                           <span class="display-mode">
                                                <label id="lblafternoon">@item.AfternoonUnit.SymbolToString</label> 
                                           </span>  
    <input type="text" id="afternoonUnit" value="@item.AfternoonUnit.SymbolToString" class="edit-mode" /> 
                                                                 </text>, style: "col2Width"),
                         grid.Column("Action", "Action", format: @<text>
                                            <button class="edit-unit display-mode">Edit</button>
                                            <button class="save-unit edit-mode">Save</button>
                                            <button class="cancel-unit edit-mode">Cancel</button>
                                                </text>, style: "col3Width", canSort: false)))

0 个答案:

没有答案