8/28/2017 Sql server, .

server, .net and c# video tutorial: Drilldown and display hierarchical data in gridview without using datasource controls - Part 36

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

Drilldown and display hierarchical data in gridview without using

datasource controls - Part 36

Suggested Videos
Part 33 - Merging cells in gridview footer row
Part 34 - Drilldown and display hierarchical data in gridview using sqldatasource control Best software training and placements in
Part 35 - Drilldown and display hierarchical data in gridview using objectdatasource marathahalli, bangalore. For further
control details please call 09945699393.

CBSE Class 9 Maths

Number Systems
In this video, we will discuss about drilling down and displaying hierarchical data
in gridview controls without using any datasource control. We will be using the
following 3 database tables for this demo. CPT Tutorial
1. tblContinents Part 1 : Video | Text | Slides
2. tblCountries
3. tblCities
Important Videos
The Gift of Education

Web application for your business

1. When the page loads, a gridview should display the list of all continents available in
tblContinents table How to become .NET developer
2. When a "Select" button is clicked against a continent, all the countries belonging to
the selected continent should be displayed in another gridview. Resources available to help you
3. Along the same lines, when a "Select" button is clicked against a country, all the
cities belonging to the selected country should be displayed in another gridview.
Dot Net Video Tutorials
Angular 2 Tutorial

Design Patterns

ASP.NET Web API

Bootstrap

AngularJS Tutorial

jQuery Tutorial

JavaScript with ASP.NET Tutorial

JavaScript Tutorial

Charts Tutorial

LINQ

LINQ to SQL
Use sql script from Part 34 by clicking here to create and populate the required tables.
LINQ to XML
To retrieve continents, countries and cities data and display in gridview without using
Entity Framework
datasource controls, we need to create respective data access layer class files. We

http://csharp-video-tutorials.blogspot.in/2013/03/drilldown-and-display-hierarchical-data_29.html 1/5
8/28/2017 Sql server, .net and c# video tutorial: Drilldown and display hierarchical data in gridview without using datasource controls - Part 36
discussed about this in Part 35. Click here if you need this code. WCF

Now drag and drop 3 gridview controls on webform1.aspx. ASP.NET Web Services

Dot Net Basics

Configure GridView1, to include 2 TemplateFields and 1 BoundField.
1. The first TemplateField should contain an ItemTemplate, which includes a linkbutton, C#
that the user can click.
2. Set the CommandName property of the LinkButton to SelectCountries. SQL Server
3. The second TemplateField should contain an ItemTemplate, which includes a Label
control, that binds to ContinentId column. ADO.NET
4. The BoundField get it's data from ContinentName column.
5. Set AutoGenerateColumns property of GridView1 to false. ASP.NET

GridView

ASP.NET MVC

Visual Studio Tips and Tricks

Dot Net Interview Questions

Slides
Entity Framework

WCF

ASP.NET Web Services

Dot Net Basics

C#
Configure GridView2, to include 2 TemplateFields and 2 BoundFields.
1. The first TemplateField should contain an ItemTemplate, which includes a linkbutton, SQL Server
that the user can click.
2. Set the CommandName property of the LinkButton to SelectCities. ADO.NET
3. The first TemplateField should contain an ItemTemplate, which includes a Label
control, that binds to CountryId coulmn. ASP.NET
4. The first BoundField get it's data from CountryName column.
GridView
5. The second BoundField get it's data from ContinentId column.
6. Set AutoGenerateColumns property of GridView2 to false. ASP.NET MVC
7. Set GridView2 property, DataKeyNames="CountryId".
Visual Studio Tips and Tricks

Java Video Tutorials

Part 1 : Video | Text | Slides

Part 2 : Video | Text | Slides

Part 3 : Video | Text | Slides

Interview Questions
C#

SQL Server

Written Test

GridView3 does not require any additonal configuration. Just the HTML as shown
below.

Now generate RowCommand event handler methods for GridView1 and GridView2.

http://csharp-video-tutorials.blogspot.in/2013/03/drilldown-and-display-hierarchical-data_29.html 2/5
8/28/2017 Sql server, .net and c# video tutorial: Drilldown and display hierarchical data in gridview without using datasource controls - Part 36
At this point the HTML on WebForm1.aspx should be as shown below.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
onrowcommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton CommandName="SelectCountries"
ID="btnSelectCountries"
runat="server">Select</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Continent Id">
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("ContinentId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ContinentName"
HeaderText="Continent Name" />
</Columns>
</asp:GridView>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false"
onrowcommand="GridView2_RowCommand" DataKeyNames="CountryId">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton CommandName="SelectCities" ID="btnSelectCities"
runat="server">Select</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country Id">
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("CountryId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CountryName" HeaderText="Country Name" />
<asp:BoundField DataField="ContinentId" HeaderText="Continent Id" />
</Columns>
</asp:GridView>
<asp:GridView ID="GridView3" runat="server">
</asp:GridView>

Copy and paste the following code in webform1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = ContinentDataAccessLayer.GetAllContinents();
GridView1.DataBind();
}
}

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs

e)
{
if (e.CommandName == "SelectCountries")
{
int rowIndex = ((GridViewRow)
((LinkButton)e.CommandSource).NamingContainer).RowIndex;
Label lblContinent = (Label)GridView1.Rows[rowIndex].FindControl("Label1");
int continentId = Convert.ToInt32(lblContinent.Text);

http://csharp-video-tutorials.blogspot.in/2013/03/drilldown-and-display-hierarchical-data_29.html 3/5
8/28/2017 Sql server, .net and c# video tutorial: Drilldown and display hierarchical data in gridview without using datasource controls - Part 36
GridView2.DataSource =
CountryDataAccessLayer.GetCountriesByContinent(continentId);
GridView2.DataBind();

GridView1.SelectRow(rowIndex);

if (GridView2.SelectedValue != null)
{
GridView3.DataSource =
CityDataAccessLayer.GetCitiesByCountryId(Convert.ToInt32(GridView2.SelectedValue)
);
GridView3.DataBind();
}
}
}

protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs

e)
{
if (e.CommandName == "SelectCities")
{
int rowIndex = ((GridViewRow)
((LinkButton)e.CommandSource).NamingContainer).RowIndex;
Label lblCountry = (Label)GridView2.Rows[rowIndex].FindControl("Label2");
int countryId = Convert.ToInt32(lblCountry.Text);

GridView3.DataSource = CityDataAccessLayer.GetCitiesByCountryId(countryId);
GridView3.DataBind();

GridView2.SelectRow(rowIndex);
}
}

3 comments:

malavika April 1, 2013 at 5:30 AM

if i select a particular person record in gridview,then will it possible to show their
complete details in detail view along with their photo
Reply

Replies

Venkat April 1, 2013 at 6:01 AM

Hi Malavika, details view concepts are discussed in Parts 37 to 41 in asp.net
gridview tutorial. Please click here to access asp.net gridview tutorial. I hope

http://csharp-video-tutorials.blogspot.in/2013/03/drilldown-and-display-hierarchical-data_29.html 4/5