2

I have a WebGrid on an asp mvc page which displays its header columns horizontally, however I want them to be displayed vertically. Does anyone know how I can achieve this?

This is what Im trying to achieve from this;

enter image description here

to this;

enter image description here

Thanks for your help in advance.

Code:

 @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)))
NTinkicht
  • 972
  • 2
  • 12
  • 34

0 Answers0