I want to set an ID on each column inside the table header, using WebGrid.
Having the code:
@grid.Table
(
htmlAttributes: new { id = "my-list" },
tableStyle: "grid hover-rows clickable-rows",
columns: grid.Columns
(
grid.Column(
columnName: "colName",
header: "Name",
style: "col-width-10"),
grid.Column(
columnName: "colAge",
header: "Age",
style: "col-width-10"),
grid.Column(
columnName: "colGender",
header: "Gender",
style: "col-width-10")
)
)
That generates the HTML:
<table class="grid" id="my-list">
<thead>
<tr>
<th scope="col">
<a href="/MyWebSite?sort=colName&sortdir=ASC">Name</a>
</th>
<th scope="col">
<a href="/MyWebSite?sort=colAge&sortdir=ASC">Age</a>
</th>
<th scope="col">
<a href="/MyWebSite?sort=colGender&sortdir=ASC">Gender</a>
</th>
</tr>
</thead>
<tbody>
the body doesn't matter
</tbody>
</table>
But I need IDs inside th elements:
<table class="grid" id="my-list">
<thead>
<tr>
<th id="columnHeaderName" scope="col">
<a href="/MyWebSite?sort=colName&sortdir=ASC">Name</a>
</th>
<th id="columnHeaderAge" scope="col">
<a href="/MyWebSite?sort=colAge&sortdir=ASC">Age</a>
</th>
<th id="columnHeaderGender" scope="col">
<a href="/MyWebSite?sort=colGender&sortdir=ASC">Gender</a>
</th>
</tr>
</thead>
<tbody>
the body doesn't matter
</tbody>
</table>
The code above does not compile, is just an example to explain the problem.
Thanks in advance!