MVCContrib Grid Overriding RowStart and RowEnd - The Row start and end are rendered above the entire grid

Question

Ok so i'm using the MVCContrib grid trying to override the start of a row and the end of a row. It's not working as advertised. I'm reasonably sure it's me doing something silly.

This is an extract from my MVC2.0 view.

<div id="chargestable">
<br />
<%  With Html.Grid(Model.InvoiceListingInformation)
        .Columns(Function(column)
                     column.For(Function(setColumns) setColumns.InvoiceNumber)
                     column.For(Function(setColumns) setColumns.InvoiceDate)
                     column.For(Function(setColumns) setColumns.ExclGST)
                     column.For(Function(setColumns) setColumns.InclGST)
                 End Function)
        .RowStart(Function(pRowStart) "Some extra text here <tr>")
        .RowEnd(Function(pRowEnd) "</tr>")
        .Render()

    End With
   %>
</div>

This is the resulting html...it's very weird:

<div id="chargestable">
    <br>
    Some extra text here text/Some extra text here Some extra text here text/Some extra text here Some extra text here text/Some extra text here Some extra text here text/Some extra text here Some extra text here text/Some extra text here Some extra text here text/Some extra text here 
<table class="grid">
<thead>
<tr><th>Invoice Number</th><th>Invoice Date</th><th>Excl G S T</th><th>Incl G S T</th></tr>
</thead>
<tbody>
<tr><td>x</td><td>13/12/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>y</td><td>15/11/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>z</td><td>13/10/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>a</td><td>13/09/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>b</td><td>13/08/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>c</td><td>12/07/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>d</td><td>13/06/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
<tr><td>e</td><td>13/05/2009 12:00:00 AM</td><td>amnt</td><td>amnt</td></tr>
</tbody>
</table>
</div>

The stuff i put in the begin row and end row functions is being rendered above the grid entirely. What the what? I've been smacking my head over this one for a couple of hours can anyone see what i've done wrong?

(PS i can't just use the attributes as i need to wrap the row in another html element)

regards, james

Answer 1

I tried doing what you did, and the generated HTML was:

...
<tbody>
Some extra text here <tr>...</tr>
Some extra text here <tr>...</tr>
...

However the extra text all renders at the top of the grid, presumably because it's not contained within any child element.

To test what's happening, you could try:

 .RowStart(Function(pRowStart) "<tr>extra row here</tr><tr>")

However I'm not sure you actually can wrap the in another html element, at least if you want valid html.