asp.net-mvc-3gridmvccontrib-grid

mvccontrib grid - How to add <tr> id


I want to add an id to the "tr" elements of the mvccontrib grid I build:

<tr id="0"/>
<tr id="1"/>

so if the table contains 10 rows, the ids are 0 through to 9.

One way is to add an additional item to my entity to store this value and then create this as a hidden column with the id as the value of this item - not very elegant.

Is there a more elegant way to do this? Thanks

I've got this far but now it complains at the RenderUsing line, any ideas?

@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>()));

}


Solution

  • You could transform the model to add it a row index and then use the RowAttributes method:

    @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)))
    )
    

    Also I have pre-pended the id with the id keyword as ids in HTML cannot statr with a number as shown in your example.

    Sample output:

    <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>