Home > Others

The GridView changes the row and column style based on the value changes.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
I have seen some questions in the Forum about how to change the value of a column in a row in the GridView (these values are empty, not empty, or some other values ), the background color and text color also change. This article discusses this issue.

The best way to change the style of a column based on its value is to find a solution in the DataRowBound event of the GridView. After the row in the GridView is bound to data, the DataRowBound event is executed immediately. The DataRowBound event uses the GridViewRowEventargs class as the event variable. With event variables, you can use the GridViewRowEventArgs attribute to operate rows that have been bound to Data.

Protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
{
GridViewRow row = e. Row;
}

Row returns a GridViewRow object in the TableRow class.

The bound Row has several different types. For example, DataRow, EmptyDataRow, Footer, Header, Pager, and Separator. The row type of the current row can be obtained through the RowType attribute of the GridView. RowType is a set of DataControlRow enumeration.

Check the following code example to see if the row listed in the GridView is a standard row.

Protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
{
If (e. Row. RowType = DataControlRowType. DataRow)
{
// Do something!
}
}

You can use the Cells attribute of Row to get its Cells, which will return a TableCellCollection object. Then the TableCellCollection index is used to obtain the specific Cells. TableCellcollection indexes return a TabelCell object, corresponding to a Cell in the Row:

Protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
{
If (e. Row. RowType = DataControlRowType. DataRow)
{
String value = e. Row. Cells [0]. Text;
}
}

Now you know how to get the value of a column in a row in the GridView, it is easier to change its style based on the value changes. The following example uses the Northwind database to change the color to red by checking whether the value of the fourth column (UnitPrice) is greater than 10.

<% @ Page Language = "C #" %>
<% @ Import Namespace = "System. Drawing" %>

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<Script runat = "server">
Protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
{
If (e. Row. RowType = DataControlRowType. DataRow)
{
If (Decimal. Parse (e. Row. Cells [3]. Text)> 10)
E. Row. Cells [3]. BackColor = Color. Red;
}
}

</Script>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Untitled Page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: GridView ID = "GridView1" runat = "server" performanceid = "sqlperformance1" AutoGenerateColumns = "False"
DataKeyNames = "ProductID" OnRowDataBound = "GridView1_RowDataBound">
<Columns>
<Asp: BoundField ReadOnly = "True" HeaderText = "ProductID" InsertVisible = "False" DataField = "ProductID"
SortExpression = "ProductID"/>
<Asp: BoundField HeaderText = "ProductName" DataField = "ProductName" SortExpression = "ProductName"/>
<Asp: BoundField HeaderText = "QuantityPerUnit" DataField = "QuantityPerUnit" SortExpression = "QuantityPerUnit"/>
<Asp: BoundField HeaderText = "UnitPrice" DataField = "UnitPrice" SortExpression = "UnitPrice"/>
</Columns>
</Asp: GridView>
<Asp: SqlDataSource ID = "SqlDataSource1" runat = "server" SelectCommand = "SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice] FROM [Alphabetical list of products]"

ConnectionString = "<% $ ConnectionStrings: AppConnectionString1 %>"/>

</Div>
</Form>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More