mvccontrib grid - Cómo agregar <tr> id
-
12-11-2019 - |
Pregunta
Quiero agregar una identificación a los elementos "tr" de la grilla mvccontrib que construyo:
<tr id="0"/>
<tr id="1"/>
entonces, si la tabla contiene 10 filas, los identificadores son del 0 al 9.
Una forma es agregar un elemento adicional a mi entidad para almacenar este valor y luego crearlo como una columna oculta con la identificación como valor de este elemento; no es muy elegante.
¿Existe una forma más elegante de hacer esto?Gracias
Llegué hasta aquí pero ahora se queja en la línea RenderUsing, ¿alguna idea?
@model IEnumerable<Tens.Models.UserPreviousNamesView>
<div class="demo_jui">
@{
var userId = 0;
foreach (var item in Model)
{
userId = item.Id;
break;
}
@(Html.Grid(Model.Select((item,index) => new { Item = item, Index = index}))
.Columns(col =>
{
col.For(p => p.Item.Title);
col.For(p => p.Item.Name);
col.Custom(@<text>
@Ajax.ActionLink("Delete", "DeleteUserPreviousName", "Summary", null, null, new { id = item.Item.Id, @class = "deleteUserPreviousName" })
</text>).Encode(false);
})
.RowAttributes(p => new Hash(Id => "id"+p.Item.Index.ToString()))
.Attributes(Id => "userPreviousNamesTable")
.Empty("You currently have no Previous Names.")
.RenderUsing(new Tens.GridRenderers.UserPreviousNamesGridRenderer<Tens.Models.UserPreviousNamesView>()));
}
Solución
Podrías transformar el modelo para agregarle un índice de fila y luego usar el RowAttributes
método:
@model IEnumerable<MyViewModel>
@(Html
.Grid(Model.Select((item, index) => new { Item = item, Index = index }))
.Columns(column =>
{
column.For(x => x.Item.Foo);
column.For(x => x.Item.Bar);
})
.RowAttributes(x => new Hash(id => string.Format("id{0}", x.Item.Index)))
)
También he antepuesto la identificación con el id
La palabra clave como identificadores en HTML no puede comenzar con un número como se muestra en su ejemplo.
Salida de muestra:
<table class="grid">
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr id="id0" class="gridrow">
<td>foo 1</td>
<td>bar 1</td>
</tr>
<tr id="id1" class="gridrow_alternate">
<td>foo 2</td>
<td>bar 2</td>
</tr>
<tr id="id2" class="gridrow">
<td>foo 3</td>
<td>bar 3</td>
</tr>
</tbody>
</table>
Otros consejos
Siempre puede mostrar columnas ocultas sin agregar una identificación a una fila o columnas en particular, como se muestra a continuación
$(".mvcGridDollarHeader th:nth-child(16)").hide();
$(".mvcGrid td:nth-child(16)").hide();
Dónde mvcGrid
es tableStyle y mvcGridDollarHeader
es el estilo de encabezado.
@grid1.GetHtml(
tableStyle: "mvcGrid",
displayHeader: true,
emptyRowCellValue: "",
headerStyle: "mvcGridDollarHeader",