MVC Webgrid show only 1 Model column

Question

I try to display a list in a Webgrid but the view shows only one column and no matter what I do I can't seems to get it to show the other columns (my model has 3 properties and one of them is complex and contains 4 properties so I expect 6 columns).

View:

@model IEnumerable<AIM.Police.DB.Factor>
@using AIM.Police.DB

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="float-right">

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

@grid.GetHtml()
</div>

To the View I pass a list of Factor, defined as:

public class Factor  
{
    public Factor()
    {
        this.TraitVector = new TraitVector();
    }

    [Key]
    [Column(Order=0)]
    public FactorTypesEnum FactorType { get; set; }

    [Key]
    [Column(Order = 1)]
    public int ID { get; set; }
    public TraitVector TraitVector { get; set; }      
}

And the FactorTypesEnum and TraitVector are defined as:

public enum FactorTypesEnum
{
    StimulusType = 1,
    OffenseType,
    InterrogationStage,
    InterrogeeStatus,
    ZoneOfRelevance,
    InterrogationExperience,
    InterrogationCount 
}

[ComplexType]
public class TraitVector
{       
    public double AttentionState { get; set; }
    public double AffectState { get; set; }
    public double AttitudeState { get; set; }
    public double AffiliationState { get; set; }
}

Finally here's the Controller's simplest Index action:

    public ActionResult Index(int? id)
    {
        return View(db.Factors.ToList());
    }

The Model contains the expected 47 rows of Factor objects including all properties defined for Factor (FactorType, ID and TraitVector), as read from the DB table and passed to the View by the Action, however in the generated Html only the ID column appears.

It may worth noting that the model, Factor, is defined in a separate DLL and that in the DB all data fields have values (no nulls).

Can anyone figure this out for me please?

Answer 1

To answer my own question, what did the job was to explicitly bind the data to the grid, like this:

    grid.Bind(Model.Factors, new[] { "FactorType", "ID", 
                         "TraitVector.AttentionState", "TraitVector.AffectState", 
                         "TraitVector.AttitudeState", "TraitVector.AffiliationState"});

As this explicit binding was not necessary when in the past I displayed other models in the MVC webgrid, I can only assume that this has to do with either the FactorType being an enum type and/or the TraitVector being a complex type and that the webgrid cannot automatically bind these fields as it is doing for 'simpler' types

Answer 2

You need to define your columns. Something like this:

<div id="gridContent">
    @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),
            grid.Column("Name", " Name"),
            grid.Column("Description", "Description", style: "description"),
            grid.Column("Quantity", "Quantity")
     )) 
</div>

See http://www.codeproject.com/Tips/615776/WebGrid-in-ASP-NET-MVC4 for more information.