MVC WebGrid - How to customize columns in MVC grid view

In my previous post How to use grid view in MVC I discussed very basic use of WebGrid extension in MVC applications to display a grid view. In real life application you need a little bit more control on how the grid view is rendered. In this post I will discuss about how to control the columns that are displayed in grid.

Source property of WebGrid is used to attach data collection that is going to be used to display grid. By default WebGrid will display all the properties of the collection object as columns in the grid. Most of the time you are not looking into rendering all the properties as columns. And some time you need to display column text by manipulating some existing data and styling it differently. This means we need a way to pick and choose the columns or properties that should be displayed as columns in grid. There are two options in WebGrid to control display of columns.

Set name of columns in constructor of WebGrid

WebGrid object constructor takes an argument to set collection of column names that are going to rendered. This collection is name of the properties of the object.

@model IQueryable
@{
    var columns = new List<string>() { "Title", "Author" };
    var grid = new WebGrid(source: Model,
                           columnNames: columns,
                           defaultSort: "DateCreated",
                           rowsPerPage: 25,
                           canSort: true);
}
    

As you can see from above code, I have created a list of string with two values in it. Then this collection object has been assigned to columnNames constructor parameters. This is a very quick way to specific the columns. This method does not provide very fine control on display of individual columns in grid view. Following image shows how my sample grid view looks like.

Set collection of column objects in GetHtml

If you are looking for greater control on display of columns in grid view, then you will need to set collection of WebGridColumn objects in GetHtml method during rendering of view.

<div>
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Title", "Blog title"),
            grid.Column("Author", "Blog Author"),
            grid.Column("DateCreated", "Created On", 
               @<i>@item.DateCreated.ToString("yyyy-MM")<i>, "mystyle", false)
            )
         )
<div>
    

Above code snippet shows how to set this collection. WebGridColumn object exposes following properties that allows you to control behavior of each column.

• ColumnName: This property is used to specify name of the property on your object that will be used to render that column.
• Header: In this property you can specify header text for that column. This header will not be displayed if you set value of displayHeader parameter to false.
• Format: This property provides the control on how to control formatting of text that is going to be displayed in that column. The value of this property is a Func (aka delegate) that is passed WebGridRow object when this delegate is called. This WebGridRow object provides access to collection object for that row. You can query this WebGridRow object to access value of all the properties of your data object. You can manipulate the values in your delegate and provide custom formatting of view for that column itself. In the sample above you can see how DateCreate property is being accessed to do custom formatting of display of date. The following screenshot shows outcome of this formatting. Very important information that you will need to keep in mind is that control will pass the whole row to your delegate. This means you can access any data field for that data element and not just the column that is bound to that grid column.

  

• CanSort: This property allows you to control sorting behavior for that column. If you set the value for this property to false then clicking on header of this column will have no effect and you will not be able to sort your view based on that column's values.
• Style: As the name suggests, this property allows you to set CSS class names for individual columns.

As you can see WebGrid provides you full control on controlling on selecting what individual columns to display in your MVC grid view and how to manipulate each control's rendering. In subsequent posts, I will discuss more about customization of MVC grid.