8/28/2017 Sql server, .

net and c# video tutorial: Formatting gridview based on row data - Part 9

More Next Blog Create Blog Sign In

Sql server, .net and c# video tutorial

Free C#, .Net and Sql server video tutorial for beginners and intermediate programmers.

Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Formatting gridview based on row data - Part 9

Suggested Videos
Part 6 - AccessDataSource in asp.net
Part 7 - Formatting asp.net gridview control
Part 8 - Formatting gridview using rowdatabound event
Best software training and placements in
marathahalli, bangalore. For further
details please call 09945699393.

Please watch Part 8 of the asp.net gridview tutorial before proceeding with this video. I
CBSE Class 9 Maths
have tblEmployee table, as shown below.
Number Systems

CPT Tutorial
Part 1 : Video | Text | Slides

Important Videos
The Gift of Education

Web application for your business

How to become .NET developer

Now, we want to retrieve and display above data in a gridview control. The data in the
gridview control, should be formatted as shown in the image below. Notice that, based Resources available to help you
on the country culture, we need to format and display AnnualSalary column with correct
currency symbol. The important thing is that, Culture column should not visible to the
Dot Net Video Tutorials
end user in the gridview control.
Angular 2 Tutorial

Design Patterns

ASP.NET Web API

Bootstrap

AngularJS Tutorial
WebForm1.aspx HTML:
jQuery Tutorial
<div style="font-family:Arial">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" JavaScript with ASP.NET Tutorial
ConnectionString="<%$ ConnectionStrings:DBConnectionString %>"
SelectCommand="SELECT * FROM [tblEmployee]"></asp:SqlDataSource> JavaScript Tutorial
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Charts Tutorial
DataKeyNames="EmployeeId" DataSourceID="SqlDataSource1"
onrowdatabound="GridView1_RowDataBound"> LINQ
<Columns>
LINQ to SQL
<asp:BoundField DataField="EmployeeId" HeaderText="EmployeeId"
InsertVisible="False" ReadOnly="True" SortExpression="EmployeeId" /> LINQ to XML
<asp:BoundField DataField="FirstName" HeaderText="FirstName"
SortExpression="FirstName" /> Entity Framework
<asp:BoundField DataField="AnnualSalary" HeaderText="AnnualSalary"
http://csharp-video-tutorials.blogspot.in/2013/02/formatting-gridview-based-on-row-data.html 1/4
8/28/2017 Sql server, .net and c# video tutorial: Formatting gridview based on row data - Part 9
SortExpression="AnnualSalary" /> WCF
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" /> ASP.NET Web Services
<asp:BoundField DataField="CountryCulture" HeaderText="CountryCulture"
Dot Net Basics
SortExpression="CountryCulture" />
</Columns> C#
</asp:GridView>
</div> SQL Server

RowDataBound event of the GridView control can be used to achieve this very ADO.NET
easily. RowDataBound event is raised every time, a row from the datasource is bound
to row in the gridview control. In row RowDataBound event retrieve country culture ASP.NET
information and turn off the visibility of CountryCulture cell. Make sure to hide
GridView
CountryCulture header table cell as well.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) ASP.NET MVC
{
// If the row being databound is a header row Visual Studio Tips and Tricks
if (e.Row.RowType == DataControlRowType.Header)
{ Dot Net Interview Questions
// Hide CountryCulture header table cell
e.Row.Cells[4].Visible = false; Slides
}
Entity Framework
// If the row being databound is a data row
else if (e.Row.RowType == DataControlRowType.DataRow) WCF
{
// Retrieve the unformatted salary ASP.NET Web Services
int salary = Convert.ToInt32(e.Row.Cells[2].Text);
// Retrieve the culture Dot Net Basics
string countryCulture = e.Row.Cells[4].Text;
C#
// Turn off the visibility of CountryCulture cell
e.Row.Cells[4].Visible = false;
SQL Server
// Format the currency using specific country culture
string formattedString = string.Format ADO.NET
(new System.Globalization.CultureInfo(countryCulture), "{0:c}", salary);
// Finally set the formatted currency as text for ASP.NET
// display purpose in the gridview control
e.Row.Cells[2].Text = formattedString; GridView
}
ASP.NET MVC
}
Visual Studio Tips and Tricks
Run the application now, and notice that, the data is displayed as expected. If you
are using Google chrome browser, right click on the page, and select "View Page
Source". Notice that, in the page source, the table cell (TD) for countryCulture is not Java Video Tutorials
rendered. Part 1 : Video | Text | Slides

You can also use, "Display:None" style to achieve the same thing. There are 4 steps Part 2 : Video | Text | Slides
to follow.
Part 3 : Video | Text | Slides
Step 1. First, add the following CSS class. It's always a good practise, to define all the
styles in a stylesheet. Add a stylesheet to your asp.net project, and copy and paste the
following style class. Interview Questions
.DisplayNone C#
{
display: none SQL Server
}
Written Test
Step 2. Drag and drop the stylesheet on the webform. This should generate a reference
to the stylesheet, using "link" element as shown below.
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />

Step 3. Make the following changes to the boundcolumn, that displays

"CountryCulture". Notice that, ItemStyle-CssClass and HeaderStyle-CssClass is set to
"DisplayNone"
<asp:BoundField DataField="CountryCulture" HeaderText="CountryCulture"

http://csharp-video-tutorials.blogspot.in/2013/02/formatting-gridview-based-on-row-data.html 2/4
8/28/2017 Sql server, .net and c# video tutorial: Formatting gridview based on row data - Part 9
SortExpression="CountryCulture" ItemStyle-CssClass="DisplayNone"
HeaderStyle-CssClass="DisplayNone" />

Step 4: Finally in the code-behind file, we can get rid of the code that turns off the
visibility of "CountryCulture" cell in both the header and datarow. The modified code is
shown below
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int salary = Convert.ToInt32(e.Row.Cells[2].Text);
string countryCulture = e.Row.Cells[4].Text;
string formattedString = string.Format
(new System.Globalization.CultureInfo(countryCulture), "{0:c}", salary);
e.Row.Cells[2].Text = formattedString;
}
}

Run the application now, and notice that, the data is displayed as expected. Now,
right click on the page, and select "View Page Source". Notice that, in the page
source, the table cell (TD) for countryCulture is rendered, with class="DisplayNone".
So, when we use "display: none" the data gets rendered, but will not be visible in the
control to the end user.

What is the difference between Visible=False and Display:None?

Visible=False will not render data, where as Display:None will render data , but will not
be visible in the control.

1 comment:

Mahesh Kolluri October 11, 2013 at 5:25 AM

Thank you so much, it's very useful.
Reply

Enter your comment...

Comment as: Select profile...

Publish Preview

http://csharp-video-tutorials.blogspot.in/2013/02/formatting-gridview-based-on-row-data.html 3/4