Gridview is one of the most brawny web controls which is used in most of the ASP.Net vane applications to display information to the exploiter in tabular imprint. In this article, we are going to discuss on

  1. How to apply styles to gridview
  2. How to apply style to a particular row based on the row values

Before discussing on how to apply styles in gridview, let me the explain the role of HTML, CSS in ASP.Net webform application. Understanding these basics would help you to handle the things better .
Role of HTML,CSS,Javascript in ASP.Net web application(or web application using any framework):
world wide web browsers ( Internet Explorer, Firefox, Chrome etc.. ) are the applications which can understand only HTML, CSS and Javascript. Ofcourse, there are few exceptions. We can install some plugins in the browser so that it can interpret few other things as well. But most of the browsers ( as it is installed ) would understand only HTML, CSS and Javascript. Irrespective of the network framework you are using to build the web application ( ASP.Net, Java Struts2, Ruby on rails, Django etc.. ) your web application should be converted to HTML, CSS, Javascript for the browser to understand. This is the reason you don ’ t need different browsers for the network applications built on unlike technologies as all are being converted to HTML, CSS and Javascript so that all browsers can understand.

HTML would provide you the layout of the vane page – which content should be at what station
CSS ( Cascading dash sheet ) would help you in applying styles to elements of the page. E.g, If you want all paragraph text to be italic and in blue color, CSS would help you to achieve it easily without much modification to the code. I am including inline styles a well in this category for clarity .
Javascript is for processing the elements at customer side without going back to the server. Using ajax, though you can go to the waiter to get server data. Javascript is chiefly used for establishment, handling the drug user remark, changing the style of some chemical element based on data or user stimulation etc…
So the world wide web controls that you use in your webform would be converted to any of the HTML elements as shown in the below painting. For exemplar, asp : Textbox would be converted to input HTML component, asp : Linkbutton would be converted to anchor link HTML ( ) and so on… This conversion is required for all web controls as browsers can understand only HTML, CSS and Javascript .
ASP.Net Server Control HTML
Out subject of interest – Gridview web dominance in ASP.Net is converted to table component of HTML. thus any the style you want to apply to the gridview would be applied to table element of the generated HTML. We have had enough theory. Let ’ s apply some style to Gridview so that it can look bang-up J
Applying style in Gridview:
You can apply your custom style for the Gridview as per your lotion stylus. In this article, we are going to use Bootstrap CSS. Bootstrap ( hypertext transfer protocol : // ) is one of the popular front end model which is being used in many of the web applications today. You can either download the related CSS, javascript to use in your lotion or you can use them immediately by referring them at their CDN. In this model, I have referred the CSS and JS immediately as shown below .

There is an impute by list CssClass in Gridview. If you set this property to a vogue, it would impact the wholly table. I am going to use surround table style for my gridview as depicted in the link – hypertext transfer protocol : // # tables-bordered

You can combine multiple cesium classes by mentioning them separated by space. In the above gridview, I have used cesium classes table, table-hover

The resulting gridview is shown above. I am going to add table-bordered class to CssClassAttribute thus that the table is bordered nicely. The complete CssClass attribute prize is
CssClass=”table table-hover table-bordered”
And the resulting gridview is shown below
GridView_CSS_table bordered
Applying style to a particular row based on the data:
Let ’ s consider a scenario where we need to apply different style to a detail quarrel based on row values so that it would be highlighted to the user. To achieve the lapp, define the event for OnRowDataBound and in this consequence apply the vogue for a particular row based on a value. Using the same Product board of AdventureWorks database, I would like to apply style success if the ReOrderPoint is greater than 500. Else, I want to apply the danger expressive style defined in bootstrap .

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)


if (e.Row.RowType == DataControlRowType.DataRow)


int reorderPoint = Convert.ToInt32(e.Row.Cells[2].Text);

e.Row.CssClass = reorderPoint > 500 ? "success" : "danger";



In the above gridview RowDataBound event, I am applying achiever expressive style to the rowing if the Reorderpoint column ( 3rd Column – as its zero based index I am taking value as e.Row.Cells [ 2 ] .Text ) value is greater than 500. Else I am applying risk expressive style .
immediately, when you run the application, you would get gridview like under .

Please let me know your thoughts in the comments section .
Thanks for reading the article. Please subscribe to my mailing list below .

generator :
Category : Website templates

Leave a Reply

Your email address will not be published.