How to display row number in MVC WebGrid

Question

I want to have a column as row number in MVC WebGrid. How can I do it?

Answer 1

That's a really nice approach, but when you use sorting or paging your RowNumber values won't start from 1 on the page.

In my project I had a case where I needed to know an index of the row independently of WebGrid's paging / sorting and I came across the following solution:

grid.Column(
    Header: "RowNumber",
    Format: item => item.WebGrid.Rows.IndexOf(item) + 1
)

Answer 2

You could use a view model that will contain a property indicating the row number.

Let's suppose that you have the following domain model:

public class DomainModel
{
    public string Foo { get; set; }
}

Now you build a view model that will correspond to the requirements of your view:

public class MyViewModel
{
    public int RowNumber { get; set; }
    public string Foo { get; set; }
}

and then:

public ActionResult Index()
{
    // fetch the domain model from somewhere
    var domain = Enumerable.Range(1, 5).Select(x => new DomainModel
    {
        Foo = "foo " + x
    });

    // now build the view model
    // TODO: use AutoMapper to perform this mapping
    var model = domain.Select((element, index) => new MyViewModel
    {
        RowNumber = index + 1,
        Foo = element.Foo
    });

    return View(model);
}

Now your view becomes strongly typed to the view model of course:

@model IEnumerable<MyViewModel>

@{
    var grid = new WebGrid(Model);
}

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("RowNumber"),
        grid.Column("Foo")
    )
)

Now let's suppose that for some foolish reason you don't want to use view models. In this case you could turn your view into spaghetti code if you prefer:

@model IEnumerable<DomainModel>

@{
    var grid = new WebGrid(Model.Select((element, index) => new { element, index }));
}

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("RowNumber", format: item => item.index + 1),
        grid.Column("Foo", format: item => item.element.Foo)
    )
)

Answer 3

simply add the following code

grid.Column(header: "No."
,format: item => item.WebGrid.Rows.IndexOf(item) + 1 
          + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) 
            * grid.RowsPerPage * grid.PageIndex)

Check this link for more info

hope this will be helpful to someone

Answer 4

    @{
    int i=0;
foreach (var item in Model) {
    <tr>
    <td>
    @i
    </td>
        <td>
            @Html.DisplayFor(modelItem => item.Expense)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { onclick = "return confirm('Are you sure you wish to delete this record?');" })

        </td>
    </tr>
    i++;
}
}

Try this

Answer 5

Add this:

grid.Column(header: "No.",
        format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) * grid.RowsPerPage * grid.PageIndex)