ASP.NET MVC 4 WebGrid EF

Question

I have some short questions about the Webgrid.

1. How can I put in a column the current number ? (I'm using EF)

2. How can I display a string instead of a integer ? (Let's say I have a int field height and if it's between 1.50- 1.60 I would like to see in the webgrid small , 1.60-1.70 - normal , 1.7-1.8 - big, >2 - huge )

Crt. No. | height old | height new

1 | 1.55 | small

2 | 1.78 | normal

3 | 2.40 | huge

@grid.GetHtml(tableStyle: "table",
          alternatingRowStyle: "alternate",
          headerStyle: "header",
          columns: grid.Columns(
          grid.Column(columnName: "?",header: "Crt. No.", canSort: true),
          grid.Column(columnName: "height", header: "height old", canSort: true),
          grid.Column(columnName: "height?", header: "height new", canSort: true)))

Answer 1

1). How can I put in a column the current number ? (I'm using EF)

You could use a view model and instead of binding your WebGrid to the Model, bind it to a Model.Select((item, index) => new { Index = index, Element = item }) or even better use a real view model that possess those 2 properties instead of using an anonymous object.

2). How can I display a string instead of a integer ? (Let's say I have a int field height and if it's between 1.50- 1.60 I would like to see in the webgrid small , 1.60-1.70 - normal , 1.7-1.8 - big, >2 - huge )

You could use a custom format for the column.

Here's an example:

@model IEnumerable<SomeModel>

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

@grid.GetHtml(
    tableStyle: "table",
    alternatingRowStyle: "alternate",
    headerStyle: "header",
    columns: grid.Columns(
        grid.Column(columnName: "Index", header: "Crt. No.", canSort: true),
        grid.Column(
            header: "height old", 
            canSort: true, 
            format: 
                @<text>
                    @item.Element.height
                </text>
        ),
        grid.Column(
            header: "height new", 
            canSort: true, 
            format: 
                @<text>
                    @Html.FormatHeight((double)item.Element.height)
                </text>
        )
    )
)

as you can see we have used the Html.FormatHeight custom extension method which could look like this:

public static class HtmlExtensions
{
    public static IHtmlString FormatHeight(this HtmlHelper htmlHelper, double height)
    {
        if (height < 1.5)
        {
            return new HtmlString("tiny");
        }
        if (height > 1.5 && height < 1.6)
        {
            return new HtmlString("small");
        }
        else if (height > 1.6 && height < 1.7)
        {
            return new HtmlString("normal");
        }
        else if (height > 1.7 && height < 1.8)
        {
            return new HtmlString("big");
        }

        return new HtmlString("huge");
    }
}