Custom formatting of the columns in WebGrid MVC

The previous example will render all columns but you may want to limit which columns are displayed and how the style will be implement. First I’ll show you the rendering the numbers of selected columns, you can achieve this by passing the array of the columns in the WebGrid constructor.

before webgrid mvc4
picture: 1.1

For example, the following code will render the all the columns – Picture 1.1 (you can see in the previous example):

<div id="EmployeeViewGrid">
   @{  
       var grid1 = new WebGrid(source: Model, canPage: true);
       @grid1.GetHtml();
   }
</div>

after column-names webgrid mvc
picture: 1.2

And the following code will render the three columns of EmployeeId, EmpName and Salary(picture 1.2).

<div id="EmployeeViewGrid">
    @{  
       var grid1 = new WebGrid(source: Model, canPage: true, 
             columnNames: new[] { "EmployeeId", "EmpName","Salary" });
                @grid1.GetHtml();
      }
</div>

And now I am describing the another method. With the help of this method you will also able to apply custom functionality on the renders content. In the following example i will add the currency symbol with the salary. In this method we specify the columns in the GetHtml() method instead of WebGrid constructor. This time we use the multiple arguments in the GetHtml() method, see the code below:

<div id="EmployeeViewGrid">
    @{  
        var grid1 = new WebGrid(source: Model, canPage: true, ajaxUpdateContainerId: "gridContent");
        @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            rowStyle: "row",
            htmlAttributes: new { id = "employeeGrid" },
            fillEmptyRows: false,
            columns: grid1.Columns(
             grid1.Column("EmployeeId", header: "EmployeeId"),
             grid1.Column("EmpName", header: "EmpName"),
             grid1.Column("Age", header: "Age"),
             grid1.Column("Salary", format: (item) => new HtmlString("$ " + Convert.ToString(item.Salary)), header: "Salary")))
    }
</div>

custom formatting in webgrid in mvc4
picture: 1.3

The format parameter of the Column() method allows us to customize the rendering of a data item. See the above we use the format parameter in the column of ‘Salary’. The above code specify the CSS classes and additional attributes for the header, rows, alternative rows and columns. You can see the your new rendered WebGrid after implement the styling as:

    .row
    {
        background: #fff;
    }
    .header
    {
        background: #bbb;
    }
    .alt
    {
        background: #d6e3f2;
    }
    .webGrid
    {
        border: 1px solid #bbb;
    }
    .webGrid th, .webGrid td
    {
            padding-left: 10px;
    }

See the picture 1.3

So you can use the following parameters to give the styling:

tableStyle: CSS class that is used to style the whole table.
headerStyle: CSS class that is used to style the table header.
footerStyle: CSS class that is used to style the table footer.
rowStyle: CSS class that is used to style each table row.
alternatingRowStyle: CSS class that is used to style even-numbered table rows.
selectedRowStyle: T CSS class that is used to style the selected table row. (Only
one row can be selected at a time.)

One thought on “Custom formatting of the columns in WebGrid MVC”

  1. thanks for this article. I searched high and low and this is the only link I could find that shows how to format currency columns in webgrid.

Comments are closed.