How to apply (set) custom style on MVC webgrid - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to apply (set) custom style on MVC webgrid

In this article I am going to explain how to apply or set the custom style on MVC webgrid.

How to apply (set) custom style on MVC webgrid



Description:

I am using webgrid to display the data in View. I want change the row style and apply custom color. Webgrid have some inbuilt property to apply custom formatting. Here are these properies:

        tableStyle: "webgrid",
        headerStyle: "header",
        footerStyle: "footer",
        rowStyle: "row-style",
        alternatingRowStyle: "alternating-row",

You have to write the custom CSS for given property. You can also apply the CSS style (put all class style in CSS file and include it in your view).

Implementation:
I have created style for header, row and alternate row.  Below is the example of it.
View (index.cshtml) :
@model IEnumerable<MVC_Project.Models.Employee>

<style type="text/css">
  
    .webgrid {
        font-size: 1.2em;
        width: 80%;
        display: table;    
        border-collapse: collapse;
    }     
    .header {
        background-color: #3F95C5;
        color: #fff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: center;
    }
    .header a {
        text-decoration: none;
        color: #fff;
    }
    td {
            text-align: center;
        }


    table img
    {
        width:150px;
    }
    .row-style {
        background-color :#E6E6E6;
    }
    .row-style:hover {
        background-color: #C0C0C0;
    }
   
     .alternating-row {
        background-color: #DEEDF5;
    }
        .alternating-row:hover {
            background-color: #6EA0C3;
        }
</style>


@{var grid = new WebGrid(Model, canSort: true, canPage: true);
  }
@grid.GetHtml(
        tableStyle: "webgrid",
        headerStyle: "header",
        footerStyle: "footer",
        fillEmptyRows: true,
        rowStyle: "row-style",
        alternatingRowStyle: "alternating-row",
    mode: WebGridPagerModes.All,
    columns: grid.Columns
    (
        grid.Column("Name","Name"),
        grid.Column("Phone","Phone"),
        grid.Column("Salary","Salary"),
         grid.Column("Department","Department"),
         //if else condition to check email id
             grid.Column("Email",format: (item) =>
             {
                 if (item.emailid == null)
                     return Html.Raw("Email not available");
                 else
                     return (item.EmailId);
             }),
       
       //if else condition to display image
       grid.Column("Image",format: (item) =>
                 {
                     if (item.ImagePath == null)
                         return Html.Raw (string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/images/image.jpg")));
                     else
                         return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\" /></text>", Url.Content(item.ImagePath)));
                 }),       
               
grid.Column("Edit",format:@<text>@Html.ActionLink("Edit", "Update", new { id = item.ID })</text>),
grid.Column("Delete",format:@<text>@Html.ActionLink("Delete", "Delete", new { id = item.ID })</text>)
   )
     )
   

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon