Menu Example - Countries

SlidingMenu example : Countries

Menu Examples home

North America

South America

Africa

Country	Capital	Currency	Pop
Algeria	Algiers	Algerian Dinar	31.7M
Angola	Luanda	Kwanza	10.4M
Benin	Porto-Novo	CFA Franc BCEAO	6.6M
Botswana	Gaborone	Pula	1.6M
Burkina Faso	Ouagadougou	CFA Franc BCEAO	12.3M
Burundi	Bujumbura	Burundi Franc	6.2M
Cameroon	Yaounde	CFA Franc BEAC	15.8M
Central African Republic	Bangui	CFA Franc BEAC	3.6M
Chad	N'Djamena	CFA Franc BEAC	8.7M
Comoros	Moroni	Comoro Franc	596T
Congo, Democratic Republic of the	Kinshasa	Franc Congolais	53.6M
Congo, Republic of the	Brazzaville	CFA Franc BEAC	2.9M
Cote d'Ivoire	Yamoussoukro	CFA Franc BCEAO	16.4M
Djibouti	Djibouti	Djibouti Franc	461T
Egypt	Cairo	Egyptian Pound	69.5M
Equatorial Guinea	Malabo	CFA Franc BEAC	486T
Eritrea	Asmara	Nakfa	4.3M
Ethiopia	Addis Ababa	Ethiopian Birr	65.9M
Gabon	Libreville	CFA Franc BEAC	1.2M
Ghana	Accra	Cedi	19.9M
Guinea	Conakry	Guinean Franc	7.6M
Guinea-Bissau	Bissau	CFA Franc BCEAO	1.3M
Kenya	Nairobi	Kenyan shilling	30.8M
Lesotho	Maseru	Loti	2.2M
Liberia	Monrovia	Liberian Dollar	3.2M
Libya	Tripoli	Libyan Dinar	5.2M
Madagascar	Antananarivo	Malagasy Franc	16M
Malawi	Lilongwe	Kwacha	10.5M
Mali	Bamako	CFA Franc BCEAO	11M
Mauritania	Nouakchott	Ouguiya	2.7M
Mayotte	Mamoutzou	Euro	163T
Morocco	Rabat	Moroccan Dirham	30.6M
Mozambique	Maputo	Metical	19.4M
Namibia	Windhoek	Namibian Dollar	1.8M
Niger	Niamey	CFA Franc BCEAO	10.4M
Nigeria	Abuja	Naira	126.6M
Rwanda	Kigali	Rwanda Franc	7.3M
Saint Helena	Jamestown	Saint Helenian Pound	7T
São Tomé and Príncipe	Sao Tome	Dobra	165T
Senegal	Dakar	CFA Franc BCEAO	10.3M
Seychelles	Victoria	Seychelles Rupee	80T
Sierra Leone	Freetown	Leone	5.4M
Somalia	Mogadishu	Somali Shilling	7.5M
South Africa	Pretoria	Rand	43.6M
Sudan	Khartoum	Sudanese Dinar	36.1M
Swaziland	Mbabane	Lilangeni	1.1M
Tanzania	Dar es Salaam	Tanzanian Shilling	36.2M
The Gambia	Banjul	Dalasi	1.4M
Togo	Lome	CFA Franc BCEAO	5.2M
Tunisia	Tunis	Tunisian Dinar	9.7M
Uganda	Kampala	Uganda Shilling	24M
Western Sahara	--	Moroccan Dirham	251T
Zambia	Lusaka	Kwacha	9.8M
Zimbabwe	Harare	Zimbabwe Dollar	11.4M

Asia

Australia & Oceania

Europe

Tip:
Use the map to navigate the SlidingMenu

Disclaimer:
The data supplied here is out of date and not intended to be accurate.

Here I show all the SlidingMenu markup for this example, though the Image map definition is not shown here. However, if you click the Clipboard button all the XML/HTML markup of this example will be copied to your clipboard, just paste it anywhere inside the <FORM></FORM> tags of your .aspx-file.

The HeaderTemplate (starts at line 5) and the CanvasTemplate (starts at line 8) will be instantiated for each continent in the data source. Inside each HeaderTemplate a Label WebControl, lblContinent, will be instantiated and in the GroupDataBound eventhandler I will pass the continent name to this Label. Inside each CanvasTemplate a DataGrid WebControl, dgCountry, will be instantiated and in the same GroupDataBound eventhandler I will bind that DataGrid to the DataTable that hold all the countries for the current continent. Each country will be a DataRow in such a DataTable.

SlidingMenu markup is blue, Comments are green.

0.	<wm:SlidingMenu id="smCountries" runat="server">
1.		<SlidingMenuStyle BorderColor="white" BorderWidth="2" Height="410" Width="400" SlideSmootheness="20" />
2.		<GroupHeaderStyle BorderWidth="2" BorderColor="white" />
3.		<GroupCanvasStyle ScrollbarTrackColor="#F1F1F2" Scrollbar3dlightColor="#F1F1F2" ScrollbarShadowColor="#F1F1F2" ScrollbarArrowColor="white" />
4.		<DataBound>
5.			<HeaderTemplate>
6.				<asp:Label ID="lblContinent" Runat="server" ForeColor="white" Font-Bold=True></asp:Label>
7.			</HeaderTemplate>
8.			<CanvasTemplate>
9.				<asp:DataGrid ID="dgCountry" Runat="server" AutoGenerateColumns="False" GridLines="None">
10.					<HeaderStyle CssClass="country_columnHeader" />
11.					<ItemStyle CssClass="country_backgroundDefault" />
12.					<AlternatingItemStyle CssClass="country_backgroundAlternate" />
13.					<Columns>
14.						<asp:TemplateColumn>
15.							<ItemTemplate>
16.								<asp:Image ID="imgFlag" Runat="server" Width="18" Height="12" />
17.							</ItemTemplate>
18.						</asp:TemplateColumn>
19.						<asp:BoundColumn HeaderText="Country" DataField="Country" ItemStyle-CssClass="country_content" />
20.						<asp:BoundColumn HeaderText="Capital" DataField="Capital" ItemStyle-CssClass="country_content" />
21.						<asp:BoundColumn HeaderText="Currency" DataField="Currency" ItemStyle-CssClass="country_content" />
22.						<asp:TemplateColumn HeaderText="Pop" ItemStyle-HorizontalAlign="Right">
23.							<ItemTemplate>
24.								<asp:Label ID="lblPopulation" Runat="server" CssClass="country_content" />
25.							</ItemTemplate>
26.						</asp:TemplateColumn>
27.					</Columns>
28.				</asp:DataGrid>
29.			</CanvasTemplate>
30.		</DataBound>
31.	</wm:SlidingMenu>

If you want to make this example yourself, copy all the C# code for this example to your clipboard by pressing the clipboard button and paste to any text editor. You will of course also need to copy the XML/HTML tags (XML tab) and the data source (DS tab).

Here I only show the GroupDataBound eventhandler of the SlidingMenu. The DataSource is a DataTableCollection so that this eventhandler will be called for each DataTable in the DataSource.

0.	private void smCountries_GroupDataBound(object sender, SlidingMenuGroupEventArgs e)
1.	{
2.		DataTableCollection dtcDataSource = (DataTableCollection)smCountries.DataSource;
3.		//this eventhandler run once for each DataTable in the DataTableCollection DataSource, therefore there is a current DataTable
4.		DataTable dtCurrent = dtcDataSource[e.GroupIndex];
5.
6.		Label lblContinent = (Label)e.GroupHeader.FindControl("lblContinent");
7.		DataGrid dgCountry = (DataGrid)e.GroupCanvas.FindControl("dgCountry");
8.
9.		lblContinent.Text = (string)dtCurrent.Rows[0]["continent"]; //continent exists for all rows, I just choose arbitrary row number 1
10.		//Bind the DataGrid within the current GroupCanvas to the current DataTable
11.		dgCountry.DataSource = dtCurrent;
12.		//delegate the ItemDatabound event to the function dgCountry_ItemDataBound
13.		dgCountry.ItemDataBound += new DataGridItemEventHandler(dgCountry_ItemDataBound);
14.		//call dgCountry_ItemDataBound for each DataRow within the DataTable DataSource by invoking DataBind()
15.		dgCountry.DataBind();
16.
17.		//Here I mainly secure that the colors of some of the SlidingMenu elements corresponds to the color on the image map
18.		string currentColor = String.Empty;
19.		switch (lblContinent.Text)
20.		{
21.			case "North America" :
22.				currentColor = "#000066";
23.				break;
24.			case "South America" :
25.				currentColor = "#990033";
26.				break;
27.			case "Africa" :
28.				currentColor = "#996600";
29.				//if the current Group is the Group that shows Africa then open that Group at page load
30.				e.GroupHeader.GroupHeaderStyles.OpenThisGroupAtStartup = true;
31.				break;
32.			case "Asia" :
33.				currentColor = "#CC9933";
34.				break;
35.			case "Australia & Oceania" :
36.				currentColor = "#993333";
37.				break;
38.			case "Europe" :
39.				currentColor = "#006666";
40.				break;
41.		}
42.		e.GroupHeader.GroupHeaderStyles.BackgroundColor = currentColor;
43.		e.GroupCanvas.GroupCanvasStyles.ScrollbarFaceColor = currentColor;
44.	}

Unfortunately I cannot supply the database, because I got this Access database from some site, I cannot remember anymore, but I can remember there where some conditions for using this database something about not making it available for download. However, I have zipped all the flags which you can download by clicking the Download button.

If anybody should know where I have the database from or know of another database (with similar data) I can use, please email me, thanks.