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;
to this;
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)))