Simple MVC web grid issue. I just want to add a unique id to each row in a table

Somebody proposed this answer: mvccontrib grid - How to add <tr> id is there an elegant way?

I have a table like the following:

My problem

I just want to add a unique id to each row in this table

Detailed explanation of the problem

<tr class="webgrid-row-style"> I actually want @item.MvrMedsDetailsId.ToString() which is a dynamic value to be set in the row id. Like this:

<tr class="webgrid-row-style" id=@item.MvrMedsDetailsId.ToString()>
should yield for each row in the table
<tr class="webgrid-row-style" id=1>
<tr class="webgrid-row-style" id=4>
<tr class="webgrid-row-style" id=17>
The whole code
@model MedicalVariance.Models.ViewModels.AddMedicineModel
@using MedicalVariance.CustomHtmlHelpers
       <script src="@Url.Content("~/Scripts/ModalEditor.js")" type="text/javascript"></script>

 <!--Learn more about webgrid: http://msdn.microsoft.com/en-us/magazine/hh288075.aspx -->
 @{//razor starts 
     var grid = new WebGrid(source: Model.MedicineListGrid, canPage: true, rowsPerPage: 100, fieldNamePrefix: "details");

     grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(//start of @grid.GetHtml()


                        tableStyle: "webgrid",
                        headerStyle: "webgrid-header",
                        footerStyle: "webgrid-footer",
                        alternatingRowStyle: "webgrid-alternating-row",
                        selectedRowStyle: "webgrid-selected-row",
                        rowStyle: "webgrid-row-style",
                        htmlAttributes: new { id = "start" },

       columns: grid.Columns
       (

                        grid.Column
                        (

                            columnName: "MvrMedsGenericName", //this comes from the webgrid model defintion
                            header: "Medicine Names",
                            canSort: false,
                            format:
                             @<text>
                               @Html.ActionLink((string)(item.MvrMedsGenericName.ToString()),
                                    "MedicineProfile", //action name
                                    "MedicineManagement", //controller name
                             new { PKMvrMedsId = item.PKMvrMedsId }, null) 
                             </text>
                         ),

                         grid.Column
                         (
                           columnName:"MvrMedsActualOrPotential",
                           header: "Actual Or Potential",
                           canSort:false,
                           format:
                           @<text>
                             <a href="#" class="ActualSelectedModal" id="@item.MvrMedsDetailsId.ToString()">@item.MvrMedsActualOrPotential.ToString()</a>
                             </text>

                         ),
                         grid.Column
                         (
                           columnName: "MvrMedsDoses",
                           header: "Doses Administered",
                           canSort: false,
                           format:
                           @<text>
                             <a href="#" class="DoseSelectedModal" id="@item.MvrMedsDetailsId.ToString()">@item.MvrMedsActualOrPotential.ToString()</a>
                             </text> 
                         ),

                         grid.Column
                         (
                           columnName: "MvrMedsCriticalBreakDownPoint",
                           header: "Critical Break Down Point",
                           canSort: false
                         ),
                          grid.Column
                          (
                            columnName: "MvrMedsOutcomes",
                            header: "Category Outcomes",
                            canSort: false
                          ),
                          grid.Column
                          (
                           columnName: "MvrMedsPreliminaryAnalysis",
                           header: "Preliminary Analysis",
                           canSort: false
                          ),
                             grid.Column
                          (
                           columnName: "MvrMedsPreliminaryAnalysis",
                           header: "Preliminary Analysis",
                           canSort: false
                          ),

                         grid.Column
                         (
                            columnName: "PKMvrMedsId",
                            header: "Delete",
                            format:
                         @<text>
                             @Html.ActionLink((string)(item.DeleteLabel.ToString()),
                                    "DeleteMedicine", //action name
                                    "MedicineManagement", //controller name
                         new { MvrId = item.MvrId, PKMvrMedsId = item.PKMvrMedsId }, null) 
                         </text>
                         )/*Please note that DeleteAdministrationError is registered in the global.asax*/


                        )
                       );//end of @grid.GetHtml() 
     }
Which generates the following HTML
<!--Learn more about webgrid: http://msdn.microsoft.com/en-us/magazine/hh288075.aspx -->
<table class="webgrid" id="start">

    <thead>

        <tr class="webgrid-header">

            <th scope="col">Medicine Names</th>
            <th scope="col">Actual Or Potential</th>
            <th scope="col">Doses Administered</th>
            <th scope="col">Critical Break Down Point</th>
            <th scope="col">Category Outcomes</th>
            <th scope="col">Preliminary Analysis</th>
            <th scope="col">Preliminary Analysis</th>
            <th scope="col">
                <a href="/MedicineManagement/ReloadMedicineList/1?detailssort=PKMvrMedsId&amp;detailssortdir=ASC">Delete</a>
            </th>

        </tr>

    </thead>
    <tbody>
        <tr class="webgrid-row-style">

            <td>
                <a href="/MedicineManagement/MedicineProfile/1">ACETAMINOPHEN</a> 
            </td>
            <td>
                <a href="#" class="ActualSelectedModal" id="1">Actual</a>
            </td>
            <td>    
                <a href="#" class="DoseSelectedModal" id="1">Actual</a>
            </td>
            <td>Administration</td>
            <td>A</td>
            <td>ssss</td>
            <td>ssss</td>
            <td>
                <a href="/MedicineManagement/DeleteMedicine/1/1">Delete</a> 
            </td>

        </tr>
        <tr class="webgrid-alternating-row">

            <td>
                <a href="/MedicineManagement/MedicineProfile/2">ABACAVIR SULFATE</a> 
            </td>
            <td>
                <a href="#" class="ActualSelectedModal" id="2">Actual</a>
            </td>
            <td>
                <a href="#" class="DoseSelectedModal" id="2">Actual</a>
            </td>
            <td>Administration</td>
            <td>E</td>
            <td>1212</td>
            <td>1212</td>
            <td>
                <a href="/MedicineManagement/DeleteMedicine/1/2">Delete</a> 
            </td>

        </tr>

        <tr class="webgrid-row-style">

            <td>
                <a href="/MedicineManagement/MedicineProfile/3">ALPRAZOLAM</a> 
            </td>
            <td>
                <a href="#" class="ActualSelectedModal" id="3">Actual</a>
            </td>
            <td>
                <a href="#" class="DoseSelectedModal" id="3">Actual</a>
            </td>
            <td>Administration</td>
            <td>E</td>
            <td>1212</td>
            <td>1212</td>
            <td>
                <a href="/MedicineManagement/DeleteMedicine/1/3">Delete</a> 
            </td>

        </tr>

    </tbody>

</table>

Answers


I am sorry to disappoint you but the WebGrid helper that you are using doesn't allow you to set any other attribute on the <tr> element than the class.

Checkout the following excerpt from the ASP.NET MVC source code which is responsible for generating the <tr>:

private string GetTableBodyHtml(IEnumerable<WebGridColumn> columns, string rowStyle, string alternatingRowStyle, string selectedRowStyle)
{
    StringBuilder builder = new StringBuilder();
    int rowIndex = 0;
    foreach (WebGridRow row in this.Rows)
    {
        string str = this.GetRowStyle(rowIndex, rowStyle, alternatingRowStyle, selectedRowStyle);
        TagBuilder builder2 = new TagBuilder("tr");
        if (!string.IsNullOrEmpty(str))
        {
            builder2.MergeAttribute("class", str);
        }
        foreach (WebGridColumn column in columns)
        {
            string str2 = (column.Format == null) ? HttpUtility.HtmlEncode(row[column.ColumnName]) : Format(column.Format, row).ToString();
            builder2.InnerHtml = builder2.InnerHtml + GetTableCellHtml(column, str2 ?? string.Empty);
        }
        builder.Append(builder2.ToString());
        rowIndex++;
    }
    return builder.ToString();
}

So your only chance is to write a completely customized helper, use another helper which gives you far more control such as MvcContrib.Grid and Telerik Mvc Grid or use javascript to append it to the DOM.


Need Your Help

iPhone XML Parser - [c setImage:[attributeDict objectForKey:@"img"]]; WARNING

iphone xml iphone-sdk-3.0 uiimageview ios-simulator

Hi I am having issues with the following and it crashes the iPhone simulator, while the script has no errors it did bring up one warning in this script.

SmartTee filter and saving to file

c# video directshow video-capture directshow.net

How can I render video stream from webcam to file if I use smart tee filter?